

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/IKKIS_LOGO.png">
  <link rel="icon" href="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/IKKIS_LOGO.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="Ikki">
  <meta name="keywords" content="">
  
    <meta name="description" content="1. React路由原理    不同的路径渲染不同的组件 有两种实现方式   HashRouter:利用hash实现路由切换   BrowserRouter:实现h5 Api实现路由的切换    1.1 HashRouter   利用hash实现路由切换  public\index.html xml1234567891011121314151617181920212223242526272829&amp;">
<meta property="og:type" content="article">
<meta property="og:title" content="实现一个简版mini-router">
<meta property="og:url" content="http://81.68.132.127/2022/10/31/react/router/%E5%AE%9E%E7%8E%B0%E7%AE%80%E7%89%88router/index.html">
<meta property="og:site_name" content="IKKI">
<meta property="og:description" content="1. React路由原理    不同的路径渲染不同的组件 有两种实现方式   HashRouter:利用hash实现路由切换   BrowserRouter:实现h5 Api实现路由的切换    1.1 HashRouter   利用hash实现路由切换  public\index.html xml1234567891011121314151617181920212223242526272829&amp;">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/beijing/iTab-l315vy.jpeg">
<meta property="article:published_time" content="2022-10-30T23:08:28.000Z">
<meta property="article:modified_time" content="2022-10-30T23:29:36.359Z">
<meta property="article:author" content="Ikki">
<meta property="article:tag" content="react">
<meta property="article:tag" content="react-router">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/beijing/iTab-l315vy.jpeg">
  
  
    <meta name="referrer" content="no-referrer-when-downgrade">
  
  
  <title>实现一个简版mini-router - IKKI</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/css/highlight-dark.css" />
  



  
<link rel="stylesheet" href="/fluid/css/fluid-extention.css">
<link rel="stylesheet" href="/fluid/css/nihao.css">



  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"81.68.132.127","root":"/","version":"1.9.3","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"left","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":3},"lazyload":{"enable":true,"loading_img":"https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 5.4.2"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 100vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>Ikki-BUG制造者</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('http://image.ikki0603.cn') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="实现一个简版mini-router"></span>
          
        </div>

        
          
  <div class="mt-3">
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2022-10-31 07:08" pubdate>
          2022年10月31日 早上
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          51k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          425 分钟
        
      </span>
    

    
    
      
        <span id="busuanzi_container_page_pv" style="display: none">
          <i class="iconfont icon-eye" aria-hidden="true"></i>
          <span id="busuanzi_value_page_pv"></span> 次
        </span>
        
      
    
  </div>


        
      </div>

      
        <div class="scroll-down-bar">
          <i class="iconfont icon-arrowdown"></i>
        </div>
      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="padding-left: 2rem; margin-right: -1rem">
    <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">实现一个简版mini-router</h1>
            
              <p class="note note-info">
                
                  
                    本文最后更新于：2022年10月31日 早上
                  
                
              </p>
            
            
              <div class="markdown-body">
                
                <h2 id="1-React路由原理"><a href="#1-React路由原理" class="headerlink" title="1. React路由原理 "></a>1. React路由原理 </h2><ul>
<li>  不同的路径渲染不同的组件</li>
<li>有两种实现方式<ul>
<li>  HashRouter:利用hash实现路由切换</li>
<li>  BrowserRouter:实现h5 Api实现路由的切换</li>
</ul>
</li>
</ul>
<h3 id="1-1-HashRouter"><a href="#1-1-HashRouter" class="headerlink" title="1.1 HashRouter"></a>1.1 HashRouter</h3><ul>
<li>  利用hash实现路由切换</li>
</ul>
<p>public\index.html</p>
<figure class="highlight xml"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-ezvu3klacl5vpl"></i><span>xml</span><div class="collapse show" id="collapse-ezvu3klacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-id">#root</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">border</span>:<span class="hljs-number">1px</span> solid red;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;root&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#/a&quot;</span>&gt;</span>/a<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#/b&quot;</span>&gt;</span>/b<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;hashchange&#x27;</span>,<span class="hljs-function">()=&gt;</span>&#123;</span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">hash</span>);</span><br><span class="language-javascript">            <span class="hljs-keyword">let</span> pathname = <span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">hash</span>.<span class="hljs-title function_">slice</span>(<span class="hljs-number">1</span>);<span class="hljs-comment">//把最前面的那个#删除 </span></span><br><span class="language-javascript">            root.<span class="hljs-property">innerHTML</span> = pathname;</span><br><span class="language-javascript">        &#125;);</span><br><span class="language-javascript"></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="1-2-BrowserRouter"><a href="#1-2-BrowserRouter" class="headerlink" title="1.2 BrowserRouter"></a>1.2 BrowserRouter</h3><ul>
<li>  利用h5 Api实现路由的切换</li>
</ul>
<h4 id="1-2-1-history"><a href="#1-2-1-history" class="headerlink" title="1.2.1 history"></a>1.2.1 history</h4><ul>
<li>  HTML5规范给我们提供了一个<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/history">history</a>接口</li>
<li>  HTML5 History API包括2个方法：<code>history.pushState()</code>和<code>history.replaceState()</code>，和1个事件<code>window.onpopstate</code></li>
</ul>
<h5 id="1-2-1-1-pushState"><a href="#1-2-1-1-pushState" class="headerlink" title="1.2.1.1 pushState"></a>1.2.1.1 pushState</h5><ul>
<li>history.pushState(stateObject, title, url)，包括三个参数<ul>
<li>  第一个参数用于存储该url对应的状态对象，该对象可在onpopstate事件中获取，也可在history对象中获取</li>
<li>  第二个参数是标题，目前浏览器并未实现</li>
<li>  第三个参数则是设定的url</li>
</ul>
</li>
<li>  pushState函数向浏览器的历史堆栈压入一个url为设定值的记录，并改变历史堆栈的当前指针至栈顶</li>
</ul>
<h5 id="1-2-1-2-replaceState"><a href="#1-2-1-2-replaceState" class="headerlink" title="1.2.1.2 replaceState"></a>1.2.1.2 replaceState</h5><ul>
<li>  该接口与pushState参数相同，含义也相同</li>
<li>  唯一的区别在于<code>replaceState</code>是替换浏览器历史堆栈的当前历史记录为设定的url</li>
<li>  需要注意的是<code>replaceState</code>不会改动浏览器历史堆栈的当前指针</li>
</ul>
<h5 id="1-2-1-3-onpopstate"><a href="#1-2-1-3-onpopstate" class="headerlink" title="1.2.1.3 onpopstate"></a>1.2.1.3 onpopstate</h5><ul>
<li>  该事件是window的属性</li>
<li>  该事件会在调用浏览器的前进、后退以及执行<code>history.forward</code>、<code>history.back</code>、和<code>history.go</code>触发，因为这些操作有一个共性，即修改了历史堆栈的当前指针</li>
<li>  在不改变document的前提下，一旦当前指针改变则会触发<code>onpopstate</code>事件</li>
</ul>
<h5 id="1-2-1-4-案例"><a href="#1-2-1-4-案例" class="headerlink" title="1.2.1.4 案例"></a>1.2.1.4 案例</h5><ul>
<li>  浏览器针对每个页面维护一个<code>History</code>栈,执行<code>pushState</code>函数可压入设定的<code>url</code>至栈顶,同时修改当前指针</li>
<li>  当执行<code>back</code>和<code>forward</code>操作时，history栈大小并不会改变（history.length不变），仅仅移动当前指针的位置</li>
<li>  若当前指针在history栈的中间位置(非栈顶)，此时执行pushState会在指针当前的位置添加此条目,并成为新的栈顶</li>
</ul>
<figure class="highlight xml"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-akgjt7lacl5vpl"></i><span>xml</span><div class="collapse show" id="collapse-akgjt7lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-id">#root</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">border</span>:<span class="hljs-number">1px</span> solid red;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>:<span class="hljs-number">20px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;root&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> historyObj = <span class="hljs-variable language_">window</span>.<span class="hljs-property">history</span>;</span><br><span class="language-javascript">        <span class="hljs-comment">//监听路径改变事件 表示将当前的状态变更了，弹出了</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-property">onpushstate</span> = <span class="hljs-function">(<span class="hljs-params">event</span>) =&gt;</span> &#123;</span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">type</span>,event.<span class="hljs-property">detail</span>.<span class="hljs-property">state</span>);</span><br><span class="language-javascript">            root.<span class="hljs-property">innerHTML</span> = <span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">pathname</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;popstate&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">event</span>) =&gt;</span> &#123;</span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">type</span>,event.<span class="hljs-property">state</span>);</span><br><span class="language-javascript">            root.<span class="hljs-property">innerHTML</span> = <span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">pathname</span>;</span><br><span class="language-javascript">        &#125;);</span><br><span class="language-javascript"></span><br><span class="language-javascript">        (<span class="hljs-keyword">function</span> (<span class="hljs-params">historyObj</span>) &#123;</span><br><span class="language-javascript">            <span class="hljs-keyword">let</span> oldPushState = history.<span class="hljs-property">pushState</span>;<span class="hljs-comment">//缓存原生的pushState</span></span><br><span class="language-javascript">            historyObj.<span class="hljs-property">pushState</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">state, title, pathname</span>) &#123;</span><br><span class="language-javascript">                <span class="hljs-keyword">let</span> result = oldPushState.<span class="hljs-title function_">apply</span>(history, <span class="hljs-variable language_">arguments</span>);</span><br><span class="language-javascript">                <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">onpushstate</span> === <span class="hljs-string">&#x27;function&#x27;</span>) &#123;</span><br><span class="language-javascript">                    <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">onpushstate</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">CustomEvent</span>(<span class="hljs-string">&#x27;pushstate&#x27;</span>,&#123;<span class="hljs-attr">detail</span>:&#123;pathname,state&#125;&#125;));</span><br><span class="language-javascript">                &#125;</span><br><span class="language-javascript">                <span class="hljs-keyword">return</span> result;</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">        &#125;)(historyObj);</span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> oldHistoryLength = historyObj.<span class="hljs-property">length</span>;</span><br><span class="language-javascript">        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;</span><br><span class="language-javascript">            historyObj.<span class="hljs-title function_">pushState</span>(&#123; <span class="hljs-attr">page</span>: <span class="hljs-number">1</span> &#125;, &#123; <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;page1&#x27;</span> &#125;, <span class="hljs-string">&#x27;/page1&#x27;</span>);<span class="hljs-comment">//page1</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(historyObj.<span class="hljs-property">length</span>-oldHistoryLength);</span><br><span class="language-javascript">        &#125;, <span class="hljs-number">1000</span>);</span><br><span class="language-javascript">        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;</span><br><span class="language-javascript">            historyObj.<span class="hljs-title function_">pushState</span>(&#123; <span class="hljs-attr">page</span>: <span class="hljs-number">2</span> &#125;, &#123; <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;page2&#x27;</span> &#125;, <span class="hljs-string">&#x27;/page2&#x27;</span>);<span class="hljs-comment">//page2</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(historyObj.<span class="hljs-property">length</span>-oldHistoryLength);</span><br><span class="language-javascript">        &#125;, <span class="hljs-number">2000</span>);</span><br><span class="language-javascript">        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;</span><br><span class="language-javascript">            historyObj.<span class="hljs-title function_">pushState</span>(&#123; <span class="hljs-attr">page</span>: <span class="hljs-number">3</span> &#125;, &#123; <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;page3&#x27;</span> &#125;, <span class="hljs-string">&#x27;/page3&#x27;</span>);<span class="hljs-comment">//page3</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(historyObj.<span class="hljs-property">length</span>-oldHistoryLength);</span><br><span class="language-javascript">        &#125;, <span class="hljs-number">3000</span>);</span><br><span class="language-javascript">        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;</span><br><span class="language-javascript">            historyObj.<span class="hljs-title function_">back</span>();<span class="hljs-comment">//historyObj.go(-1);//page2</span></span><br><span class="language-javascript">            <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">()=&gt;</span><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(historyObj.<span class="hljs-property">length</span>-oldHistoryLength),<span class="hljs-number">100</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript">        &#125;, <span class="hljs-number">4000</span>);</span><br><span class="language-javascript">        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;</span><br><span class="language-javascript">            historyObj.<span class="hljs-title function_">pushState</span>(&#123; <span class="hljs-attr">page</span>:<span class="hljs-number">4</span> &#125;, &#123; <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;page4&#x27;</span> &#125;, <span class="hljs-string">&#x27;/page4&#x27;</span>);<span class="hljs-comment">//page4</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(historyObj.<span class="hljs-property">length</span>-oldHistoryLength);</span><br><span class="language-javascript">        &#125;, <span class="hljs-number">5000</span>);</span><br><span class="language-javascript">        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;</span><br><span class="language-javascript">            historyObj.<span class="hljs-title function_">go</span>(<span class="hljs-number">1</span>);</span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(historyObj.<span class="hljs-property">length</span>-oldHistoryLength);<span class="hljs-comment">//page4</span></span><br><span class="language-javascript">        &#125;, <span class="hljs-number">6000</span>);</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></div></figure>

<h2 id="2-基本路由"><a href="#2-基本路由" class="headerlink" title="2.基本路由 "></a>2.基本路由 </h2><h3 id="2-1-安装"><a href="#2-1-安装" class="headerlink" title="2.1 安装"></a>2.1 安装</h3><figure class="highlight css"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-4wd1zvlacl5vpl"></i><span>css</span><div class="collapse show" id="collapse-4wd1zvlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs css">npm <span class="hljs-selector-tag">i</span> react-router-dom <span class="hljs-attr">--save</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="2-2-src-index-js"><a href="#2-2-src-index-js" class="headerlink" title="2.2 src\index.js"></a>2.2 src\index.js</h3><p>src\index.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-3el0vflacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-3el0vflacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">HashRouter</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">Router</span>,<span class="hljs-title class_">Route</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-router-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Home</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Home&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">User</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/User&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Profile</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Profile&#x27;</span>;<br><span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Home&#125;</span> <span class="hljs-attr">exact</span>/&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/user&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;User&#125;</span> /&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/profile&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Profile&#125;/</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span></span><br>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;root&#x27;</span>));<br><br></code></pre></td></tr></table></div></figure>

<h3 id="2-3-Home-js"><a href="#2-3-Home-js" class="headerlink" title="2.3 Home.js"></a>2.3 Home.js</h3><p>src\components\Home.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-d0cc9placl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-d0cc9placl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>,&#123;<span class="hljs-title class_">Component</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Home</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>&#123;<br>    <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>);<br>        <span class="hljs-keyword">return</span> (<br>            <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> </span><br><span class="language-xml">             <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span><br><span class="language-xml">             <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">&#123;()</span>=&gt;</span>this.props.history.push(&#123;pathname:&#x27;/user&#x27;,state:&#123;id:1&#125;&#125;)&#125;&gt;跳转到/user<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br><span class="language-xml">            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>        )<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="2-4-Home-js"><a href="#2-4-Home-js" class="headerlink" title="2.4 Home.js"></a>2.4 Home.js</h3><p>src\components\User.js</p>
<figure class="highlight pf"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-5fvzm1lacl5vpl"></i><span>pf</span><div class="collapse show" id="collapse-5fvzm1lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs pf">import React,&#123;Component&#125; <span class="hljs-keyword">from</span> &#x27;react&#x27;;<br>export <span class="hljs-keyword">default</span> class User extends React.Component&#123;<br>    render()&#123;<br>        console.<span class="hljs-keyword">log</span>(this.props.location.<span class="hljs-keyword">state</span>);<br>        return (<br>            <span class="hljs-variable">&lt;div&gt;</span><br>                <span class="hljs-variable">&lt;p&gt;</span>User&lt;/p&gt;<br>                <span class="hljs-variable">&lt;button onClick=&#123;()=&gt;</span>this.props.history.goBack()&#125;&gt;返回&lt;/button&gt;<br>            &lt;/div&gt;<br>        )<br>    &#125;<br>&#125;<br>/**<br>&#123;<br>    <span class="hljs-string">&quot;history&quot;</span>: &#123;<br>        <span class="hljs-string">&quot;length&quot;</span>: <span class="hljs-number">3</span>,<br>        <span class="hljs-string">&quot;action&quot;</span>: <span class="hljs-string">&quot;POP&quot;</span>,<br>        <span class="hljs-string">&quot;location&quot;</span>: &#123;<br>            <span class="hljs-string">&quot;pathname&quot;</span>: <span class="hljs-string">&quot;/user&quot;</span>,<br>            <span class="hljs-string">&quot;search&quot;</span>: <span class="hljs-string">&quot;&quot;</span>,<br>            <span class="hljs-string">&quot;hash&quot;</span>: <span class="hljs-string">&quot;&quot;</span><br>        &#125;<br>    &#125;,<br>    <span class="hljs-string">&quot;location&quot;</span>: &#123;<br>        <span class="hljs-string">&quot;pathname&quot;</span>: <span class="hljs-string">&quot;/user&quot;</span>,<br>        <span class="hljs-string">&quot;search&quot;</span>: <span class="hljs-string">&quot;&quot;</span>,<br>        <span class="hljs-string">&quot;hash&quot;</span>: <span class="hljs-string">&quot;&quot;</span><br>    &#125;,<br>    <span class="hljs-string">&quot;match&quot;</span>: &#123;<br>        <span class="hljs-string">&quot;path&quot;</span>: <span class="hljs-string">&quot;/user&quot;</span>,<br>        <span class="hljs-string">&quot;url&quot;</span>: <span class="hljs-string">&quot;/user&quot;</span>,<br>        <span class="hljs-string">&quot;isExact&quot;</span>: true,<br>        <span class="hljs-string">&quot;params&quot;</span>: &#123;&#125;<br>    &#125;<br>&#125;<br> */<br><br></code></pre></td></tr></table></div></figure>

<h3 id="2-4-Profile-js"><a href="#2-4-Profile-js" class="headerlink" title="2.4 Profile.js"></a>2.4 Profile.js</h3><p>src\components\Profile.js</p>
<figure class="highlight scala"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-rbujnvlacl5vpl"></i><span>scala</span><div class="collapse show" id="collapse-rbujnvlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs scala"><span class="hljs-keyword">import</span> <span class="hljs-type">React</span>,&#123;<span class="hljs-type">Component</span>&#125; from &#x27;react&#x27;;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Profile</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>&#123;<br>    render() &#123;<br>        <span class="hljs-keyword">return</span> (<br>            &lt;div&gt;<span class="hljs-type">Profile</span>&lt;/div&gt;<br>        )<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h2 id="3-实现基本路由"><a href="#3-实现基本路由" class="headerlink" title="3.实现基本路由 "></a>3.实现基本路由 </h2><h3 id="3-1-src-index-js"><a href="#3-1-src-index-js" class="headerlink" title="3.1 src\index.js"></a>3.1 src\index.js</h3><ul>
<li>  <a target="_blank" rel="noopener" href="https://gitee.com/zhufengpeixun/react-router/blob/master/packages/react-router-dom/modules/index.js">react-router-dom/modules/index.js</a></li>
</ul>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-wx94j3lacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-wx94j3lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-dom&#x27;</span>;<br>+<span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">HashRouter</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">Router</span>,<span class="hljs-title class_">Route</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./react-router-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Home</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Home&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">User</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/User&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Profile</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Profile&#x27;</span>;<br><span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Home&#125;</span> <span class="hljs-attr">exact</span>/&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/user&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;User&#125;</span> /&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/profile&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Profile&#125;/</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span></span><br>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;root&#x27;</span>));<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-2-RouterContext-js"><a href="#3-2-RouterContext-js" class="headerlink" title="3.2 RouterContext.js"></a>3.2 RouterContext.js</h3><p>src\react-router\RouterContext.js</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-nrm1knlacl5vpl"></i><span>coffeescript</span><div class="collapse show" id="collapse-nrm1knlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> React.createContext(&#123;&#125;);<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-3-Router-js"><a href="#3-3-Router-js" class="headerlink" title="3.3 Router.js"></a>3.3 Router.js</h3><p>src\react-router\Router.js</p>
<figure class="highlight pgsql"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-xx60r5lacl5vpl"></i><span>pgsql</span><div class="collapse show" id="collapse-xx60r5lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs pgsql"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">import</span> RouterContext <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><span class="hljs-keyword">class</span> Router extends React.Component&#123;<br>    constructor(props)&#123;<br>        super(props);<br>        this.state = &#123;<br>            <span class="hljs-keyword">location</span>:props.history.<span class="hljs-keyword">location</span><br>        &#125;<br>        //当路径发生的变化的时候执行回调<br>        this.<span class="hljs-keyword">unlisten</span> = props.history.<span class="hljs-keyword">listen</span>((<span class="hljs-keyword">location</span>)=&gt;&#123;<br>            this.setState(&#123;<span class="hljs-keyword">location</span>&#125;);<br>        &#125;);<br>    &#125;<br>    componentWillUnmount()&#123;<br>        this.<span class="hljs-keyword">unlisten</span>&amp;&amp;this.<span class="hljs-keyword">unlisten</span>();<br>    &#125;<br>    render()&#123;<br>        let <span class="hljs-keyword">value</span> = &#123;//通过<span class="hljs-keyword">value</span>向下层传递数据<br>            <span class="hljs-keyword">location</span>:this.state.<span class="hljs-keyword">location</span>,<br>            history:this.props.history<br>        &#125;<br>        <span class="hljs-keyword">return</span> (<br>            &lt;RouterContext.Provider <span class="hljs-keyword">value</span>=&#123;<span class="hljs-keyword">value</span>&#125;&gt;<br>                &#123;this.props.children&#125;<br>            &lt;/RouterContext.Provider&gt;<br>        )<br>    &#125;<br>&#125;<br><br>export <span class="hljs-keyword">default</span> Router;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-4-Route-js"><a href="#3-4-Route-js" class="headerlink" title="3.4 Route.js"></a>3.4 Route.js</h3><p>src\react-router\Route.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-43hcanlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-43hcanlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">RouterContext</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><span class="hljs-keyword">class</span> <span class="hljs-title class_">Route</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>&#123;<br>    <span class="hljs-keyword">static</span> contextType = <span class="hljs-title class_">RouterContext</span><br>    <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-keyword">const</span> &#123;history,location&#125; = <span class="hljs-variable language_">this</span>.<span class="hljs-property">context</span>;<br>        <span class="hljs-keyword">const</span> &#123;path,<span class="hljs-attr">component</span>:<span class="hljs-title class_">RouteComponent</span>&#125; = <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>;<br>        <span class="hljs-keyword">const</span> match = location.<span class="hljs-property">pathname</span> === path;<br>        <span class="hljs-keyword">let</span> routeProps = &#123;history,location&#125;;<br>        <span class="hljs-keyword">let</span> element=<span class="hljs-literal">null</span>;<br>        <span class="hljs-keyword">if</span>(match)&#123;<br>            element= <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">RouteComponent</span> &#123;<span class="hljs-attr">...routeProps</span>&#125;/&gt;</span></span><br>        &#125;<br>        <span class="hljs-keyword">return</span> element;<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Route</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-5-react-router-index-js"><a href="#3-5-react-router-index-js" class="headerlink" title="3.5 react-router\index.js"></a>3.5 react-router\index.js</h3><p>src\react-router\index.js</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-l8z2vylacl5vpl"></i><span>coffeescript</span><div class="collapse show" id="collapse-l8z2vylacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Route&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Route&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Router&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Router&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> __RouterContext&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-6-BrowserRouter-js"><a href="#3-6-BrowserRouter-js" class="headerlink" title="3.6 BrowserRouter.js"></a>3.6 BrowserRouter.js</h3><p>src\react-router-dom\BrowserRouter.js</p>
<figure class="highlight scala"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-ysbguilacl5vpl"></i><span>scala</span><div class="collapse show" id="collapse-ysbguilacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs scala"><span class="hljs-keyword">import</span> <span class="hljs-type">React</span> from &#x27;react&#x27;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-type">Router</span>&#125; from &#x27;../react-router&#x27;;<br><span class="hljs-keyword">import</span> &#123;createBrowserHistory&#125; from &#x27;history&#x27;;<br><span class="hljs-comment">//创建相应的历史对象，并且传入Router组件，原样渲染子组件</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">BrowserRouter</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>&#123;<br>    <span class="hljs-comment">//不管是哪种创建历史对象的方法，得到的history 长的都一样，都像window.history</span><br>    history = createBrowserHistory(<span class="hljs-keyword">this</span>.props)<span class="hljs-comment">//window.history</span><br>    render()&#123;<br>        <span class="hljs-keyword">return</span> (<br>            &lt;<span class="hljs-type">Router</span> history=&#123;<span class="hljs-keyword">this</span>.history&#125;&gt;<br>                &#123;<span class="hljs-keyword">this</span>.props.children&#125;<br>            &lt;/<span class="hljs-type">Router</span>&gt;<br>        )<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-type">BrowserRouter</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-7-HashRouter-js"><a href="#3-7-HashRouter-js" class="headerlink" title="3.7 HashRouter.js"></a>3.7 HashRouter.js</h3><p>src\react-router-dom\HashRouter.js</p>
<figure class="highlight scala"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-ldi5stlacl5vpl"></i><span>scala</span><div class="collapse show" id="collapse-ldi5stlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs scala"><span class="hljs-keyword">import</span> <span class="hljs-type">React</span> from &#x27;react&#x27;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-type">Router</span>&#125; from &#x27;../react-router&#x27;;<br><span class="hljs-keyword">import</span> &#123;createHashHistory&#125; from &#x27;history&#x27;;<br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HashRouter</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>&#123;<br>    history = createHashHistory()<span class="hljs-comment">//hash实现</span><br>    render()&#123;<br>        <span class="hljs-keyword">return</span> (<br>            &lt;<span class="hljs-type">Router</span> history=&#123;<span class="hljs-keyword">this</span>.history&#125;&gt;<br>                &#123;<span class="hljs-keyword">this</span>.props.children&#125;<br>            &lt;/<span class="hljs-type">Router</span>&gt;<br>        )<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-type">HashRouter</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-8-react-router-dom-index-js"><a href="#3-8-react-router-dom-index-js" class="headerlink" title="3.8 react-router-dom\index.js"></a>3.8 react-router-dom\index.js</h3><p>src\react-router-dom\index.js</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-7i3g2rlacl5vpl"></i><span>coffeescript</span><div class="collapse show" id="collapse-7i3g2rlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../react-router&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> HashRouter&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./HashRouter&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> BrowserRouter&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./BrowserRouter&#x27;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h2 id="3-实现history"><a href="#3-实现history" class="headerlink" title="3.实现history "></a>3.实现history </h2><h3 id="3-1-createBrowserHistory-js"><a href="#3-1-createBrowserHistory-js" class="headerlink" title="3.1 createBrowserHistory.js"></a>3.1 createBrowserHistory.js</h3><p>src\history\createBrowserHistory.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-3gfi84lacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-3gfi84lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">createBrowserHistory</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-keyword">const</span> globalHistory = <span class="hljs-variable language_">window</span>.<span class="hljs-property">history</span>;<br>    <span class="hljs-keyword">let</span> listeners = [];<span class="hljs-comment">//存放所有的监听函数</span><br>    <span class="hljs-keyword">let</span> state;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">listen</span>(<span class="hljs-params">listener</span>)&#123;<br>        listeners.<span class="hljs-title function_">push</span>(listener);<br>        <span class="hljs-keyword">return</span> <span class="hljs-function">()=&gt;</span>&#123;<br>            listeners = listeners.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>item!=listener);<br>        &#125;<br>    &#125;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">go</span>(<span class="hljs-params">n</span>)&#123;<br>        globalHistory.<span class="hljs-title function_">go</span>(n);<br>    &#125;<br>    <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;popstate&#x27;</span>,<span class="hljs-function">()=&gt;</span>&#123;<span class="hljs-comment">//TODO</span><br>        <span class="hljs-keyword">let</span> location = &#123;<span class="hljs-attr">state</span>:globalHistory.<span class="hljs-property">state</span>,<span class="hljs-attr">pathname</span>:<span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">pathname</span>&#125;;<br>        <span class="hljs-comment">//当路径改变之后应该让history的监听函数执行，重新刷新组件</span><br>        <span class="hljs-title function_">notify</span>(&#123;<span class="hljs-attr">action</span>:<span class="hljs-string">&quot;POP&quot;</span>,location&#125;);<br>    &#125;);<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">goBack</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-title function_">go</span>(-<span class="hljs-number">1</span>);<br>    &#125;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">goForward</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-title function_">go</span>(<span class="hljs-number">1</span>);<br>    &#125;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">notify</span>(<span class="hljs-params">newState</span>)&#123;<br>        <span class="hljs-comment">//把newState上的属性赋值到history对象上</span><br>        <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">assign</span>(history,newState);<br>        history.<span class="hljs-property">length</span> = globalHistory.<span class="hljs-property">length</span>;<span class="hljs-comment">//路由历史栈中历史条目的长度</span><br>        listeners.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">listener</span>=&gt;</span><span class="hljs-title function_">listener</span>(history.<span class="hljs-property">location</span>));<span class="hljs-comment">//通知监听函数执行,参数是新的location</span><br>    &#125;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">push</span>(<span class="hljs-params">pathname,nextState</span>)&#123;<span class="hljs-comment">//TODO</span><br>        <span class="hljs-keyword">const</span> action = <span class="hljs-string">&#x27;PUSH&#x27;</span>;<span class="hljs-comment">//action表示是由于什么样的动作引起了路径的变更</span><br>        <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> pathname === <span class="hljs-string">&#x27;object&#x27;</span>)&#123;<br>            state = pathname.<span class="hljs-property">state</span>;<br>            pathname = pathname.<span class="hljs-property">pathname</span>;<br>        &#125;<span class="hljs-keyword">else</span>&#123;<br>            state=nextState;<span class="hljs-comment">//TODO </span><br>        &#125;<br>        globalHistory.<span class="hljs-title function_">pushState</span>(state,<span class="hljs-literal">null</span>,pathname);<span class="hljs-comment">//我们已经 跳转路径</span><br>        <span class="hljs-keyword">let</span> location = &#123;state,pathname&#125;;<br>        <span class="hljs-title function_">notify</span>(&#123;action,location&#125;);<br>    &#125;<br>    <span class="hljs-keyword">const</span> history = &#123;<br>        <span class="hljs-attr">action</span>:<span class="hljs-string">&#x27;POP&#x27;</span>,<br>        go,<br>        goBack,<br>        goForward,<br>        push,<br>        listen,<br>        <span class="hljs-attr">location</span>:&#123;<span class="hljs-attr">pathname</span>:<span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">pathname</span>,<span class="hljs-attr">state</span>:<span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">state</span>&#125;<br>    &#125;<br>    <span class="hljs-keyword">return</span> history;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> createBrowserHistory;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-2-createHashHistory-js"><a href="#3-2-createHashHistory-js" class="headerlink" title="3.2 createHashHistory.js"></a>3.2 createHashHistory.js</h3><p>src\history\createHashHistory.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-21wmuxlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-21wmuxlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * hash不能使用 浏览器的history对象了</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@returns</span> </span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">createHashHistory</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-keyword">let</span> stack = [];<span class="hljs-comment">//类似于历史栈 里面存放都是路径</span><br>    <span class="hljs-keyword">let</span> index = -<span class="hljs-number">1</span>;<span class="hljs-comment">//栈的指针，默认是-1</span><br>    <span class="hljs-keyword">let</span> action = <span class="hljs-string">&#x27;POP&#x27;</span>;<span class="hljs-comment">//动作</span><br>    <span class="hljs-keyword">let</span> state ;<span class="hljs-comment">//最新的状态 </span><br>    <span class="hljs-keyword">let</span> listeners = [];<span class="hljs-comment">//监听函数的数组</span><br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">listen</span>(<span class="hljs-params">listener</span>)&#123;<br>        listeners.<span class="hljs-title function_">push</span>(listener);<br>        <span class="hljs-keyword">return</span> <span class="hljs-function">()=&gt;</span>&#123;<br>            listeners = listeners.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>item!=listener);<br>        &#125;<br>    &#125;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">go</span>(<span class="hljs-params">n</span>)&#123;<br>        action = <span class="hljs-string">&#x27;POP&#x27;</span>;<br>        index+=n;<span class="hljs-comment">//更改栈顶的指针</span><br>        <span class="hljs-keyword">let</span> nextLocation = stack[index];<span class="hljs-comment">//取出指定索引对应的路径对象</span><br>        state= nextLocation.<span class="hljs-property">state</span>;<span class="hljs-comment">//取出此location对应的状态 </span><br>        <span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">hash</span> = nextLocation.<span class="hljs-property">pathname</span>;<span class="hljs-comment">//修改hash值 ，从而修改当前的路径</span><br>    &#125;<br>    <span class="hljs-keyword">let</span> <span class="hljs-title function_">hashChangeHandler</span> = (<span class="hljs-params"></span>)=&gt;&#123;<br>        <span class="hljs-keyword">let</span> pathname = <span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">hash</span>.<span class="hljs-title function_">slice</span>(<span class="hljs-number">1</span>);<span class="hljs-comment">//取出最新的hash值对应的路径  #/user</span><br>        <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">assign</span>(history,&#123;action,<span class="hljs-attr">location</span>:&#123;pathname,state&#125;&#125;);<br>        <span class="hljs-keyword">if</span>(action === <span class="hljs-string">&#x27;PUSH&#x27;</span>)&#123;<span class="hljs-comment">//说明是调用push方法，需要往历史栈中添加新的条目 </span><br>            stack[++index]=history.<span class="hljs-property">location</span>;<br>        &#125;<br>        listeners.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">listener</span>=&gt;</span><span class="hljs-title function_">listener</span>(history.<span class="hljs-property">location</span>));<br>    &#125;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">push</span>(<span class="hljs-params">pathname,nextState</span>)&#123;<br>        action = <span class="hljs-string">&#x27;PUSH&#x27;</span>;<br>        <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> pathname ===<span class="hljs-string">&#x27;object&#x27;</span>)&#123;<br>            state = pathname.<span class="hljs-property">state</span>;<br>            pathname = pathname.<span class="hljs-property">pathname</span><br>        &#125;<span class="hljs-keyword">else</span>&#123;<br>            state = nextState;<br>        &#125;<br>        <span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">hash</span> = pathname;<br>    &#125;<br>    <span class="hljs-comment">//当hash发生变化的话，会执行回调</span><br>    <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;hashchange&#x27;</span>,hashChangeHandler);<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">goBack</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-title function_">go</span>(-<span class="hljs-number">1</span>);<br>    &#125;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">goForward</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-title function_">go</span>(<span class="hljs-number">1</span>);<br>    &#125;<br>    <span class="hljs-keyword">const</span> history = &#123;<br>        <span class="hljs-attr">action</span>:<span class="hljs-string">&#x27;POP&#x27;</span>,<br>        go,<br>        goBack,<br>        goForward,<br>        push,<br>        listen,<br>        <span class="hljs-attr">location</span>:&#123;&#125;,<br>        <span class="hljs-attr">location</span>:&#123;<span class="hljs-attr">pathname</span>:<span class="hljs-string">&#x27;/&#x27;</span>,<span class="hljs-attr">state</span>:<span class="hljs-literal">undefined</span>&#125;<br>    &#125;<br>    <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">hash</span>)&#123;<span class="hljs-comment">//如果初始的情况下，如果hash是有值的</span><br>        action = <span class="hljs-string">&#x27;PUSH&#x27;</span>;<br>        <span class="hljs-title function_">hashChangeHandler</span>();<br>    &#125;<span class="hljs-keyword">else</span>&#123;<br>        <span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">hash</span> = <span class="hljs-string">&#x27;/&#x27;</span>;<br>    &#125;<br>    <span class="hljs-keyword">return</span> history;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> createHashHistory;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-3-history-index-js"><a href="#3-3-history-index-js" class="headerlink" title="3.3 history\index.js"></a>3.3 history\index.js</h3><p>src\history\index.js</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-7vrcm5lacl5vpl"></i><span>coffeescript</span><div class="collapse show" id="collapse-7vrcm5lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> createBrowserHistory&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./createBrowserHistory&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> createHashHistory&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./createHashHistory&#x27;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-4-BrowserRouter-js"><a href="#3-4-BrowserRouter-js" class="headerlink" title="3.4 BrowserRouter.js"></a>3.4 BrowserRouter.js</h3><p>src\react-router-dom\BrowserRouter.js</p>
<figure class="highlight scala"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-wrhgnslacl5vpl"></i><span>scala</span><div class="collapse show" id="collapse-wrhgnslacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs scala"><span class="hljs-keyword">import</span> <span class="hljs-type">React</span> from &#x27;react&#x27;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-type">Router</span>&#125; from &#x27;../react-router&#x27;;<br>+<span class="hljs-keyword">import</span> &#123;createBrowserHistory&#125; from &#x27;../history&#x27;;<br><span class="hljs-comment">//创建相应的历史对象，并且传入Router组件，原样渲染子组件</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">BrowserRouter</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>&#123;<br>    <span class="hljs-comment">//不管是哪种创建历史对象的方法，得到的history 长的都一样，都像window.history</span><br>    history = createBrowserHistory(<span class="hljs-keyword">this</span>.props)<span class="hljs-comment">//window.history</span><br>    render()&#123;<br>        <span class="hljs-keyword">return</span> (<br>            &lt;<span class="hljs-type">Router</span> history=&#123;<span class="hljs-keyword">this</span>.history&#125;&gt;<br>                &#123;<span class="hljs-keyword">this</span>.props.children&#125;<br>            &lt;/<span class="hljs-type">Router</span>&gt;<br>        )<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-type">BrowserRouter</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="3-5-HashRouter-js"><a href="#3-5-HashRouter-js" class="headerlink" title="3.5 HashRouter.js"></a>3.5 HashRouter.js</h3><p>src\react-router-dom\HashRouter.js</p>
<figure class="highlight scala"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-cjtn5flacl5vpl"></i><span>scala</span><div class="collapse show" id="collapse-cjtn5flacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs scala"><span class="hljs-keyword">import</span> <span class="hljs-type">React</span> from &#x27;react&#x27;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-type">Router</span>&#125; from &#x27;../react-router&#x27;;<br><span class="hljs-keyword">import</span> &#123;createHashHistory&#125; from &#x27;../history&#x27;;<br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HashRouter</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>&#123;<br>    history = createHashHistory()<span class="hljs-comment">//hash实现</span><br>    render()&#123;<br>        <span class="hljs-keyword">return</span> (<br>            &lt;<span class="hljs-type">Router</span> history=&#123;<span class="hljs-keyword">this</span>.history&#125;&gt;<br>                &#123;<span class="hljs-keyword">this</span>.props.children&#125;<br>            &lt;/<span class="hljs-type">Router</span>&gt;<br>        )<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-type">HashRouter</span>;<br><br></code></pre></td></tr></table></div></figure>

<h2 id="4-path-to-regexp"><a href="#4-path-to-regexp" class="headerlink" title="4. path-to-regexp "></a>4. path-to-regexp </h2><ul>
<li>  <a target="_blank" rel="noopener" href="https://jex.im/regulex">regulex</a></li>
<li><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/path-to-regexp">path-to-regexp</a><ul>
<li>  sensitive 是否大小写敏感 (默认值: false)</li>
<li>  strict 是否允许结尾有一个可选的/ (默认值: false)</li>
<li>  end 是否匹配整个字符串 (默认值: true)</li>
</ul>
</li>
</ul>
<h3 id="4-1-home结束"><a href="#4-1-home结束" class="headerlink" title="4.1 /home结束"></a>4.1 /home结束</h3><figure class="highlight arcade"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-m7kwejlacl5vpl"></i><span>arcade</span><div class="collapse show" id="collapse-m7kwejlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs arcade">let pathToRegExp = require(<span class="hljs-string">&#x27;path-to-regexp&#x27;</span>);<br>let regxp = pathToRegExp(<span class="hljs-string">&#x27;/home&#x27;</span>,[],&#123;<span class="hljs-attr">end</span>:<span class="hljs-literal">true</span>&#125;);<br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(regxp);<span class="hljs-comment">//   /^\/home\/?$/i</span><br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(regxp.test(<span class="hljs-string">&#x27;/home&#x27;</span>));<br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(regxp.test(<span class="hljs-string">&#x27;/home/2&#x27;</span>));<br><br></code></pre></td></tr></table></div></figure>

<p><img src="http://img.zhufengpeixun.cn/homereg.png" srcset="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/loading.gif" lazyload alt="homereg"></p>
<h3 id="4-2-home非结束"><a href="#4-2-home非结束" class="headerlink" title="4.2 /home非结束"></a>4.2 /home非结束</h3><figure class="highlight arcade"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-nippxzlacl5vpl"></i><span>arcade</span><div class="collapse show" id="collapse-nippxzlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs arcade">let pathToRegExp = require(<span class="hljs-string">&#x27;path-to-regexp&#x27;</span>);<br>let regExp = pathToRegExp(<span class="hljs-string">&#x27;/home&#x27;</span>,[],&#123;<span class="hljs-attr">end</span>:<span class="hljs-literal">false</span>&#125;);<br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(regExp);<span class="hljs-comment">//   /^\/home\/?(?=\/|$)/i</span><br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(regExp.test(<span class="hljs-string">&#x27;/home&#x27;</span>));<br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(regExp.test(<span class="hljs-string">&#x27;/home/&#x27;</span>));<br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(regExp.test(<span class="hljs-string">&#x27;/home//&#x27;</span>));<br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(regExp.test(<span class="hljs-string">&#x27;/home/2&#x27;</span>));<br><br></code></pre></td></tr></table></div></figure>

<p><img src="http://img.zhufengpeixun.cn/homereg2.png" srcset="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/loading.gif" lazyload alt="homereg2"></p>
<h3 id="4-3-路径参数"><a href="#4-3-路径参数" class="headerlink" title="4.3 路径参数"></a>4.3 路径参数</h3><figure class="highlight reasonml"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-snxas6lacl5vpl"></i><span>reasonml</span><div class="collapse show" id="collapse-snxas6lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs reasonml"><span class="hljs-keyword">let</span> params = <span class="hljs-literal">[]</span>;<br><span class="hljs-keyword">let</span> regExp = path<span class="hljs-constructor">ToRegExp(&#x27;<span class="hljs-operator">/</span><span class="hljs-params">user</span><span class="hljs-operator">/</span>:<span class="hljs-params">id</span>&#x27;,<span class="hljs-params">params</span>,&#123;<span class="hljs-params">end</span>:<span class="hljs-params">true</span>&#125;)</span>;<br>console.log(regExp,params);<br><span class="hljs-comment">/**</span><br><span class="hljs-comment">/^\/user\/(?:([^\/]+?))\/?$/i</span><br><span class="hljs-comment">[ &#123; name: &#x27;id&#x27;, optional: false, offset: 7 &#125; ]</span><br><span class="hljs-comment">**/</span><br><br></code></pre></td></tr></table></div></figure>

<p><img src="http://img.zhufengpeixun.cn/uerreg.png" srcset="https://ikkiss.oss-cn-hangzhou.aliyuncs.com/images/myblog/loading.gif" lazyload alt="uerreg">useLocation</p>
<h3 id="4-4-正则匹配"><a href="#4-4-正则匹配" class="headerlink" title="4.4 正则匹配"></a>4.4 正则匹配</h3><ul>
<li>  是否捕获</li>
</ul>
<table>
<thead>
<tr>
<th>表达式</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td>()</td>
<td>表示捕获分组，()会把每个分组里的匹配的值保存起来，使用$n(n是一个数字，表示第n个捕获组的内容)</td>
</tr>
<tr>
<td>(?:)</td>
<td>表示非捕获分组，和捕获分组唯一的区别在于，非捕获分组匹配的值不会保存起来</td>
</tr>
<tr>
<td><code>(?&lt;name&gt;...)</code></td>
<td>表示命名捕获分组,反向引用一个命名分组的语法是 <code>\k&lt;name&gt;`</code>,在 replace() <code>方法的替换字符串中反向引用是用</code>$`</td>
</tr>
</tbody></table>
<figure class="highlight arcade"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-u570ltlacl5vpl"></i><span>arcade</span><div class="collapse show" id="collapse-u570ltlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs arcade"><span class="hljs-comment">//分组获取</span><br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-string">&#x27;1ab&#x27;</span>.match(<span class="hljs-regexp">/1[a-z]([b-c])/</span>));<br><span class="hljs-comment">//分组不捕获</span><br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-string">&#x27;1ab&#x27;</span>.match(<span class="hljs-regexp">/1[a-z](?:[a-z])/</span>));<br><span class="hljs-comment">//?&lt;x&gt; 表示命名捕获分组</span><br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-regexp">/(?&lt;x&gt;\d&#123;2&#125;)-(?&lt;y&gt;\d&#123;2&#125;)/</span>.exec(<span class="hljs-string">&#x27;11-22&#x27;</span>));<br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-string">&#x27;11-22&#x27;</span>.<span class="hljs-built_in">replace</span>(<span class="hljs-regexp">/(?&lt;x&gt;\d&#123;2&#125;)-(?&lt;y&gt;\d&#123;2&#125;)/</span>,<span class="hljs-string">&quot;$&lt;y&gt;-$&lt;x&gt;&quot;</span>));<br><br></code></pre></td></tr></table></div></figure>

<ul>
<li>  前瞻和后顾</li>
</ul>
<table>
<thead>
<tr>
<th>表达式</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td>(?=pattern)</td>
<td>正向肯定查找(前瞻),后面必须跟着什么</td>
</tr>
<tr>
<td>(?!pattern)</td>
<td>正向否定查找(前瞻)，后面不能跟着什么</td>
</tr>
<tr>
<td><code>(?&lt;=pattern)</code></td>
<td>反向肯定条件查找(后顾),不捕获</td>
</tr>
<tr>
<td><code>(?&lt;!pattern)</code></td>
<td>反向否定条件查找（后顾）</td>
</tr>
</tbody></table>
<figure class="highlight arcade"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-pppc9elacl5vpl"></i><span>arcade</span><div class="collapse show" id="collapse-pppc9elacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs arcade"><span class="hljs-comment">//会消耗掉字符的</span><br><span class="hljs-comment">//console.log(&#x27;1a&#x27;.match(/\d[a-z][a-z]/));</span><br><span class="hljs-comment">//?= 正向肯定查找 不消费字符 正向前瞻</span><br><span class="hljs-comment">//console.log(&#x27;1a&#x27;.match(/\d(?=[a-z])[a-z]/));</span><br><br><span class="hljs-comment">//正向肯定前瞻</span><br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-string">&#x27;1a&#x27;</span>.match(<span class="hljs-regexp">/\d(?=[a-z])[a-z]/</span>));<br><span class="hljs-comment">//正向否定前瞻</span><br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-string">&#x27;1a&#x27;</span>.match(<span class="hljs-regexp">/\d(?![A-Z])[a-z]/</span>));<br><span class="hljs-comment">//反向肯定前瞻</span><br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-string">&#x27;1a&#x27;</span>.match(<span class="hljs-regexp">/(?&lt;=[a-z])\d[a-z]/</span>));<br><span class="hljs-comment">//反向否定前瞻</span><br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-string">&#x27;1a&#x27;</span>.match(<span class="hljs-regexp">/(?&lt;![A-Z])\d[a-z]/</span>));<br><br>let <span class="hljs-built_in">array</span> = [<span class="hljs-string">&#x27;1ab&#x27;</span>];<br><span class="hljs-built_in">array</span>.index = <span class="hljs-number">0</span>;<br><span class="hljs-built_in">array</span>.input = <span class="hljs-string">&#x27;1ab&#x27;</span>;<br><span class="hljs-built_in">array</span>.groups = <span class="hljs-literal">undefined</span>;<br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-built_in">array</span>);<br><br></code></pre></td></tr></table></div></figure>

<h2 id="5-正则匹配"><a href="#5-正则匹配" class="headerlink" title="5. 正则匹配 "></a>5. 正则匹配 </h2><h3 id="5-1-matchPath-js"><a href="#5-1-matchPath-js" class="headerlink" title="5.1 matchPath.js"></a>5.1 matchPath.js</h3><p>src\react-router\matchPath.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-0apqc7lacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-0apqc7lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> pathToRegexp <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;path-to-regexp&#x27;</span>;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">compilePath</span>(<span class="hljs-params">path,options</span>)&#123;<br>    <span class="hljs-keyword">const</span> keys = [];<br>    <span class="hljs-keyword">const</span> regexp = <span class="hljs-title function_">pathToRegexp</span>(path,keys,options);<br>    <span class="hljs-keyword">return</span> &#123;keys,regexp&#125;;<br>&#125;<br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> &#123;<span class="hljs-type">*</span>&#125; pathname 浏览器栏中的真实路径</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> &#123;<span class="hljs-type">*</span>&#125; options 匹配的参数 path exact strict sensitive</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">matchPath</span>(<span class="hljs-params">pathname,options = &#123;&#125;</span>)&#123;<br>    <span class="hljs-keyword">let</span> &#123;path=<span class="hljs-string">&#x27;/&#x27;</span>,exact=<span class="hljs-literal">false</span>,strict=<span class="hljs-literal">false</span>,sensitive=<span class="hljs-literal">false</span>&#125;=options;<br>    <span class="hljs-keyword">let</span> &#123;keys,regexp&#125; = <span class="hljs-title function_">compilePath</span>(path,&#123;<br>        <span class="hljs-attr">end</span>:exact,<br>        strict,<br>        sensitive<br>    &#125;); <span class="hljs-comment">// /post/:id  keys=[&quot;id&quot;] regexp= /\/post\/([^\/]+?)/</span><br>    <span class="hljs-keyword">const</span> match = regexp.<span class="hljs-title function_">exec</span>(pathname);<br>    <span class="hljs-keyword">if</span>(!match) <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>    <span class="hljs-keyword">const</span> [url,...values] = match;<span class="hljs-comment">//[&#x27;/post/1&#x27;,&#x27;1&#x27;] url=/post/1 values=[&#x27;1&#x27;]</span><br>    <span class="hljs-comment">// pathname /post/1/name !== /post/1</span><br>    <span class="hljs-keyword">const</span> isExact = pathname === url;<br>    <span class="hljs-comment">//需要精确匹配，但是匹配的不精确，没有完全相等，也相当于没匹配上</span><br>    <span class="hljs-keyword">if</span>(exact &amp;&amp; !isExact) <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>    <span class="hljs-keyword">return</span> &#123; <span class="hljs-comment">//路由组件中props.match</span><br>        path,<span class="hljs-comment">//Route原始path</span><br>        url,<span class="hljs-comment">//正则匹配到的浏览器的pathname的部分</span><br>        isExact,<br>        <span class="hljs-attr">params</span>:keys.<span class="hljs-title function_">reduce</span>(<span class="hljs-function">(<span class="hljs-params">memo,key,index</span>)=&gt;</span>&#123;<br>            memo[key.<span class="hljs-property">name</span>] = values[index];<br>            <span class="hljs-keyword">return</span> memo;<br>        &#125;,&#123;&#125;)<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> matchPath;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-2-Router-js"><a href="#5-2-Router-js" class="headerlink" title="5.2 Router.js"></a>5.2 Router.js</h3><p>src\react-router\Router.js</p>
<figure class="highlight pgsql"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-nrduk8lacl5vpl"></i><span>pgsql</span><div class="collapse show" id="collapse-nrduk8lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><code class="hljs pgsql"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">import</span> RouterContext <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><span class="hljs-keyword">class</span> Router extends React.Component&#123;<br>+    static computeRootMatch(pathname) &#123;<br>+        <span class="hljs-keyword">return</span> &#123; <span class="hljs-type">path</span>: &quot;/&quot;, url: &quot;/&quot;, params: &#123;&#125;, isExact: pathname === &quot;/&quot; &#125;;<br>+    &#125;<br>    constructor(props)&#123;<br>        super(props);<br>        this.state = &#123;<br>            <span class="hljs-keyword">location</span>:props.history.<span class="hljs-keyword">location</span><br>        &#125;<br>        //当路径发生的变化的时候执行回调<br>        this.<span class="hljs-keyword">unlisten</span> = props.history.<span class="hljs-keyword">listen</span>((<span class="hljs-keyword">location</span>)=&gt;&#123;<br>            this.setState(&#123;<span class="hljs-keyword">location</span>&#125;);<br>        &#125;);<br>    &#125;<br>    componentWillUnmount()&#123;<br>        this.<span class="hljs-keyword">unlisten</span>&amp;&amp;this.<span class="hljs-keyword">unlisten</span>();<br>    &#125;<br>    render()&#123;<br>        let <span class="hljs-keyword">value</span> = &#123;//通过<span class="hljs-keyword">value</span>向下层传递数据<br>            <span class="hljs-keyword">location</span>:this.state.<span class="hljs-keyword">location</span>,<br>            history:this.props.history,<br>+            match: Router.computeRootMatch(this.state.<span class="hljs-keyword">location</span>.pathname)<br>        &#125;<br>        <span class="hljs-keyword">return</span> (<br>            &lt;RouterContext.Provider <span class="hljs-keyword">value</span>=&#123;<span class="hljs-keyword">value</span>&#125;&gt;<br>                &#123;this.props.children&#125;<br>            &lt;/RouterContext.Provider&gt;<br>        )<br>    &#125;<br>&#125;<br><br>export <span class="hljs-keyword">default</span> Router;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-3-Route-js"><a href="#5-3-Route-js" class="headerlink" title="5.3 Route.js"></a>5.3 Route.js</h3><p>src\react-router\Route.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-qmbg7wlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-qmbg7wlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">RouterContext</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br>+<span class="hljs-keyword">import</span> matchPath <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./matchPath&#x27;</span>;<br><span class="hljs-keyword">class</span> <span class="hljs-title class_">Route</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>&#123;<br>    <span class="hljs-keyword">static</span> contextType = <span class="hljs-title class_">RouterContext</span><br>    <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-keyword">const</span> &#123;history,location&#125; = <span class="hljs-variable language_">this</span>.<span class="hljs-property">context</span>;<br>        <span class="hljs-keyword">const</span> &#123;<span class="hljs-attr">component</span>:<span class="hljs-title class_">RouteComponent</span>&#125; = <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>;<br>+        <span class="hljs-keyword">const</span> match = <span class="hljs-title function_">matchPath</span>(location.<span class="hljs-property">pathname</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>);<br>        <span class="hljs-keyword">let</span> routeProps = &#123;history,location&#125;;<br>        <span class="hljs-keyword">let</span> element=<span class="hljs-literal">null</span>;<br>        <span class="hljs-keyword">if</span> (match) &#123;<br>+           routeProps.<span class="hljs-property">match</span> = match;<br>            element = <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">RouteComponent</span> &#123;<span class="hljs-attr">...routeProps</span>&#125; /&gt;</span></span><br>        &#125;<br>        <span class="hljs-keyword">return</span> (<br>            <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">RouterContext.Provider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&#123;routeProps&#125;</span>&gt;</span></span><br><span class="language-xml">                &#123;element&#125;</span><br><span class="language-xml">            <span class="hljs-tag">&lt;/<span class="hljs-name">RouterContext.Provider</span>&gt;</span></span><br>        )<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Route</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="5-4-react-router-index-js"><a href="#5-4-react-router-index-js" class="headerlink" title="5.4 react-router\index.js"></a>5.4 react-router\index.js</h3><p>src\react-router\index.js</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-uo28sulacl5vpl"></i><span>coffeescript</span><div class="collapse show" id="collapse-uo28sulacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Route&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Route&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Router&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Router&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> __RouterContext&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br>+<span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> matchPath&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./matchPath&#x27;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h2 id="6-实现Switch"><a href="#6-实现Switch" class="headerlink" title="6. 实现Switch "></a>6. 实现Switch </h2><h3 id="6-1-Switch-js"><a href="#6-1-Switch-js" class="headerlink" title="6.1 Switch.js"></a>6.1 Switch.js</h3><p>src\react-router\Switch.js</p>
<figure class="highlight scala"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-msmcvnlacl5vpl"></i><span>scala</span><div class="collapse show" id="collapse-msmcvnlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs scala"><span class="hljs-keyword">import</span> <span class="hljs-type">React</span> from &#x27;react&#x27;<br><span class="hljs-keyword">import</span> <span class="hljs-type">RouterContext</span> from &#x27;./<span class="hljs-type">RouterContext</span>&#x27;;<br><span class="hljs-keyword">import</span> matchPath from &#x27;./matchPath&#x27;;<br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Switch</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>&#123;<br>    static contextType = <span class="hljs-type">RouterContext</span><br>    render() &#123;<br>        const &#123; location &#125; = <span class="hljs-keyword">this</span>.context;<br>        let element, <span class="hljs-keyword">match</span>;<br>        <span class="hljs-type">React</span>.<span class="hljs-type">Children</span>.forEach(<span class="hljs-keyword">this</span>.props.children, child =&gt; &#123;<br>            <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">match</span> &amp;&amp; <span class="hljs-type">React</span>.isValidElement(child)) &#123;<br>                element = child;<br>                <span class="hljs-keyword">match</span> = matchPath(location.pathname, child.props);<br>            &#125;<br>        &#125;);<br>        <span class="hljs-keyword">return</span> <span class="hljs-keyword">match</span> ? <span class="hljs-type">React</span>.cloneElement(element, &#123;computedMatch: <span class="hljs-keyword">match</span> &#125;) : <span class="hljs-literal">null</span><br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-type">Switch</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="6-2-Route-js"><a href="#6-2-Route-js" class="headerlink" title="6.2 Route.js"></a>6.2 Route.js</h3><p>src\react-router\Route.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-14xzqjlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-14xzqjlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">RouterContext</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><span class="hljs-keyword">import</span> matchPath <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./matchPath&#x27;</span>;<br><span class="hljs-keyword">class</span> <span class="hljs-title class_">Route</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>&#123;<br>    <span class="hljs-keyword">static</span> contextType = <span class="hljs-title class_">RouterContext</span><br>    <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-keyword">const</span> &#123;history,location&#125; = <span class="hljs-variable language_">this</span>.<span class="hljs-property">context</span>;<br>+        <span class="hljs-keyword">const</span> &#123;<span class="hljs-attr">component</span>:<span class="hljs-title class_">RouteComponent</span>,computedMatch&#125; = <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>;<br>+        <span class="hljs-keyword">const</span> match = computedMatch ? computedMatch : <span class="hljs-title function_">matchPath</span>(location.<span class="hljs-property">pathname</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>);<br>        <span class="hljs-keyword">let</span> routeProps = &#123;history,location&#125;;<br>        <span class="hljs-keyword">let</span> element=<span class="hljs-literal">null</span>;<br>        <span class="hljs-keyword">if</span> (match) &#123;<br>            routeProps.<span class="hljs-property">match</span> = match;<br>            element = <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">RouteComponent</span> &#123;<span class="hljs-attr">...routeProps</span>&#125; /&gt;</span></span><br>        &#125;<br>        <span class="hljs-keyword">return</span> (<br>            <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">RouterContext.Provider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&#123;routeProps&#125;</span>&gt;</span></span><br><span class="language-xml">                &#123;element&#125;</span><br><span class="language-xml">            <span class="hljs-tag">&lt;/<span class="hljs-name">RouterContext.Provider</span>&gt;</span></span><br>        )<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Route</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="6-3-react-router-index-js"><a href="#6-3-react-router-index-js" class="headerlink" title="6.3 react-router\index.js"></a>6.3 react-router\index.js</h3><p>src\react-router\index.js</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-o2j5u3lacl5vpl"></i><span>coffeescript</span><div class="collapse show" id="collapse-o2j5u3lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Route&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Route&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Router&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Router&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> __RouterContext&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> matchPath&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./matchPath&#x27;</span>;<br>+<span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Switch&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Switch&#x27;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="6-4-src-index-js"><a href="#6-4-src-index-js" class="headerlink" title="6.4 src\index.js"></a>6.4 src\index.js</h3><p>src\index.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-1pxrh1lacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-1pxrh1lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">HashRouter</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">Router</span>,<span class="hljs-title class_">Route</span>,<span class="hljs-title class_">Switch</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./react-router-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Home</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Home&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">User</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/User&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Profile</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Profile&#x27;</span>;<br><span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span>&gt;</span></span><br><span class="language-xml">+        <span class="hljs-tag">&lt;<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Home&#125;</span> <span class="hljs-attr">exact</span>/&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/user&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;User&#125;</span> /&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/profile&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Profile&#125;/</span>&gt;</span></span><br><span class="language-xml">+        <span class="hljs-tag">&lt;/<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span></span><br>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;root&#x27;</span>));<br><br></code></pre></td></tr></table></div></figure>

<h2 id="7-Redirect"><a href="#7-Redirect" class="headerlink" title="7. Redirect "></a>7. Redirect </h2><h3 id="7-1-Redirect-js"><a href="#7-1-Redirect-js" class="headerlink" title="7.1 Redirect.js"></a>7.1 Redirect.js</h3><p>src\react-router\Redirect.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-fcmnjvlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-fcmnjvlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">RouterContext</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Lifecycle</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Lifecycle&#x27;</span>;<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">Redirect</span>(<span class="hljs-params">&#123;to&#125;</span>)&#123;<br>    <span class="hljs-keyword">return</span> (<br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">RouterContext.Consumer</span>&gt;</span></span><br><span class="language-xml">            &#123;</span><br><span class="language-xml">                contextValue=&gt;&#123;</span><br><span class="language-xml">                    const &#123;history&#125;= contextValue;</span><br><span class="language-xml">                    return (</span><br><span class="language-xml">                        <span class="hljs-tag">&lt;<span class="hljs-name">Lifecycle</span></span></span><br><span class="hljs-tag"><span class="language-xml">                           <span class="hljs-attr">onMount</span>=<span class="hljs-string">&#123;()</span>=&gt;</span>history.push(to)&#125;</span><br><span class="language-xml">                        /&gt;</span><br><span class="language-xml">                    );</span><br><span class="language-xml">                &#125;</span><br><span class="language-xml">            &#125;</span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">RouterContext.Consumer</span>&gt;</span></span><br>    );<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Redirect</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="7-2-Lifecycle-js"><a href="#7-2-Lifecycle-js" class="headerlink" title="7.2 Lifecycle.js"></a>7.2 Lifecycle.js</h3><p>src\react-router\Lifecycle.js</p>
<figure class="highlight scala"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-97wckklacl5vpl"></i><span>scala</span><div class="collapse show" id="collapse-97wckklacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs scala"><span class="hljs-keyword">import</span> <span class="hljs-type">React</span> from &#x27;react&#x27;;<br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Lifecycle</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>&#123;<br>    componentDidMount()&#123;<br>        <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.props.onMount)<br>            <span class="hljs-keyword">this</span>.props.onMount(<span class="hljs-keyword">this</span>);<br>    &#125;<br>    componentWillUnmount()&#123;<br>        <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.props.onUnmount)<br>            <span class="hljs-keyword">this</span>.props.onUnmount(<span class="hljs-keyword">this</span>);<br>    &#125;<br>    render()&#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-type">Lifecycle</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="7-3-react-router-index-js"><a href="#7-3-react-router-index-js" class="headerlink" title="7.3 react-router\index.js"></a>7.3 react-router\index.js</h3><p>src\react-router\index.js</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-5quacklacl5vpl"></i><span>coffeescript</span><div class="collapse show" id="collapse-5quacklacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Route&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Route&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Router&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Router&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> __RouterContext&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> matchPath&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./matchPath&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Switch&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Switch&#x27;</span>;<br>+<span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Redirect&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Redirect&#x27;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="7-4-src-index-js"><a href="#7-4-src-index-js" class="headerlink" title="7.4 src\index.js"></a>7.4 src\index.js</h3><p>src\index.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-fe25adlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-fe25adlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-dom&#x27;</span>;<br>+<span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">HashRouter</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">Router</span>,<span class="hljs-title class_">Route</span>,<span class="hljs-title class_">Switch</span>,<span class="hljs-title class_">Redirect</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./react-router-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Home</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Home&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">User</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/User&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Profile</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Profile&#x27;</span>;<br><span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Home&#125;</span> <span class="hljs-attr">exact</span>/&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/user&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;User&#125;</span> /&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/profile&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Profile&#125;/</span>&gt;</span></span><br><span class="language-xml">+         <span class="hljs-tag">&lt;<span class="hljs-name">Redirect</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span>/&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span></span><br>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;root&#x27;</span>));<br><br></code></pre></td></tr></table></div></figure>

<h2 id="8-Link"><a href="#8-Link" class="headerlink" title="8.Link "></a>8.Link </h2><h3 id="8-1-Link-js"><a href="#8-1-Link-js" class="headerlink" title="8.1 Link.js"></a>8.1 Link.js</h3><p>src\react-router-dom\Link.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-dmgd52lacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-dmgd52lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;__RouterContext <span class="hljs-keyword">as</span> <span class="hljs-title class_">RouterContext</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../react-router&#x27;</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">Link</span>(<span class="hljs-params">props</span>)&#123;<br>    <span class="hljs-keyword">return</span> (<br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">RouterContext.Consumer</span>&gt;</span></span><br><span class="language-xml">            &#123;</span><br><span class="language-xml">                contextValue=&gt;&#123;</span><br><span class="language-xml">                    return (</span><br><span class="language-xml">                        <span class="hljs-tag">&lt;<span class="hljs-name">a</span></span></span><br><span class="hljs-tag"><span class="language-xml">                           &#123;<span class="hljs-attr">...props</span>&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">                           <span class="hljs-attr">onClick</span>=<span class="hljs-string">&#123;(event)</span>=&gt;</span>&#123;</span><br><span class="language-xml">                              event.preventDefault();</span><br><span class="language-xml">                              contextValue.history.push(props.to);</span><br><span class="language-xml">                           &#125;&#125;</span><br><span class="language-xml">                        &gt;&#123;props.children&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></span><br><span class="language-xml">                    )</span><br><span class="language-xml">                &#125;</span><br><span class="language-xml">            &#125;</span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">RouterContext.Consumer</span>&gt;</span></span><br>    )<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="8-2-react-router-dom-index-js"><a href="#8-2-react-router-dom-index-js" class="headerlink" title="8.2 react-router-dom\index.js"></a>8.2 react-router-dom\index.js</h3><p>src\react-router-dom\index.js</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-01ivfslacl5vpl"></i><span>coffeescript</span><div class="collapse show" id="collapse-01ivfslacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../react-router&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> HashRouter&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./HashRouter&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> BrowserRouter&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./BrowserRouter&#x27;</span>;<br>+<span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Link&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Link&#x27;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="8-3-src-index-js"><a href="#8-3-src-index-js" class="headerlink" title="8.3 src\index.js"></a>8.3 src\index.js</h3><p>src\index.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-rsg2wrlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-rsg2wrlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-dom&#x27;</span>;<br>+<span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">HashRouter</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">Router</span>,<span class="hljs-title class_">Route</span>,<span class="hljs-title class_">Switch</span>,<span class="hljs-title class_">Redirect</span>,<span class="hljs-title class_">Link</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./react-router-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Home</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Home&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">User</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/User&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Profile</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Profile&#x27;</span>;<br><span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span>&gt;</span></span><br><span class="language-xml">+      <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">+          <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">+          <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/user&quot;</span> &gt;</span>用户管理<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">+          <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/profile&quot;</span> &gt;</span>个人中心<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">+      <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Home&#125;</span> <span class="hljs-attr">exact</span>/&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/user&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;User&#125;</span> /&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/profile&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Profile&#125;/</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Redirect</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span>/&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span></span><br>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;root&#x27;</span>));<br><br></code></pre></td></tr></table></div></figure>

<h2 id="9-嵌套路由"><a href="#9-嵌套路由" class="headerlink" title="9.嵌套路由 "></a>9.嵌套路由 </h2><h3 id="9-1-utils-js"><a href="#9-1-utils-js" class="headerlink" title="9.1 utils.js"></a>9.1 utils.js</h3><p>src\utils.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-2bdng0lacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-2bdng0lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">UserAPI</span> = &#123;<br>    <span class="hljs-title function_">list</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-keyword">let</span> usersStr = <span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">getItem</span>(<span class="hljs-string">&#x27;users&#x27;</span>);<br>        <span class="hljs-keyword">let</span> users= usersStr ? <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(usersStr) : [];<br>        <span class="hljs-keyword">return</span> users;<br>    &#125;,<br>    <span class="hljs-title function_">add</span>(<span class="hljs-params">user</span>)&#123;<br>        <span class="hljs-keyword">let</span> users = <span class="hljs-title class_">UserAPI</span>.<span class="hljs-title function_">list</span>();<br>        users.<span class="hljs-title function_">push</span>(user);<br>        <span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">setItem</span>(<span class="hljs-string">&#x27;users&#x27;</span>, <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>(users));<br>    &#125;,<br>    <span class="hljs-title function_">find</span>(<span class="hljs-params">id</span>)&#123;<br>        <span class="hljs-keyword">let</span> users = <span class="hljs-title class_">UserAPI</span>.<span class="hljs-title function_">list</span>();<br>        <span class="hljs-keyword">return</span> users.<span class="hljs-title function_">find</span>(<span class="hljs-function">(<span class="hljs-params">user</span>) =&gt;</span> user.<span class="hljs-property">id</span> === id);<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="9-2-User-js"><a href="#9-2-User-js" class="headerlink" title="9.2 User.js"></a>9.2 User.js</h3><p>src\components\User.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-bs43fzlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-bs43fzlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">Link</span>, <span class="hljs-title class_">Route</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../react-router-dom&#x27;</span>;<br>+<span class="hljs-keyword">import</span> <span class="hljs-title class_">UserAdd</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./UserAdd&#x27;</span>;<br>+<span class="hljs-keyword">import</span> <span class="hljs-title class_">UserDetail</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./UserDetail&#x27;</span>;<br>+<span class="hljs-keyword">import</span> <span class="hljs-title class_">UserList</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./UserList&#x27;</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">User</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-keyword">return</span> (<br>+        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">+             <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">+                    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/user/list&quot;</span>&gt;</span>用户列表<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">+                    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/user/add&quot;</span>&gt;</span>添加用户<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">+                <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">+            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">+                <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/user/add&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;UserAdd&#125;</span> /&gt;</span></span><br><span class="language-xml">+                <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/user/list&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;UserList&#125;</span> /&gt;</span></span><br><span class="language-xml">+                <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/user/detail/:id&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;UserDetail&#125;</span> /&gt;</span></span><br><span class="language-xml">+            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">+        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>    )<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="9-3-UserAdd-js"><a href="#9-3-UserAdd-js" class="headerlink" title="9.3 UserAdd.js"></a>9.3 UserAdd.js</h3><p>src\components\UserAdd.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-amwlb5lacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-amwlb5lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, &#123; <span class="hljs-title class_">Component</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">UserAPI</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../utils&#x27;</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">UserAdd</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> &#123;<br>    usernameRef<br>    <span class="hljs-title function_">constructor</span>(<span class="hljs-params">props</span>) &#123;<br>        <span class="hljs-variable language_">super</span>(props);<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">usernameRef</span> = <span class="hljs-title class_">React</span>.<span class="hljs-title function_">createRef</span>();<br>    &#125;<br>    handleSubmit = <span class="hljs-function">(<span class="hljs-params">event</span>) =&gt;</span> &#123;<br>        event.<span class="hljs-title function_">preventDefault</span>();<br>        <span class="hljs-keyword">let</span> username = <span class="hljs-variable language_">this</span>.<span class="hljs-property">usernameRef</span>.<span class="hljs-property">current</span>.<span class="hljs-property">value</span>;<br>        <span class="hljs-title class_">UserAPI</span>.<span class="hljs-title function_">add</span>(&#123; <span class="hljs-attr">id</span>: <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>() + <span class="hljs-string">&#x27;&#x27;</span>, username &#125;);<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>.<span class="hljs-property">history</span>.<span class="hljs-title function_">push</span>(<span class="hljs-string">&#x27;/user/list&#x27;</span>);<br>    &#125;<br>    <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>) &#123;<br>        <span class="hljs-keyword">return</span> (<br>            <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">&#123;this.handleSubmit&#125;</span>&gt;</span></span><br><span class="language-xml">                <span class="hljs-tag">&lt;<span class="hljs-name">input</span>  <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&#123;this.usernameRef&#125;</span> /&gt;</span></span><br><span class="language-xml">                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span> &gt;</span>提交<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br><span class="language-xml">            <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></span><br>        )<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="9-4-UserList-js"><a href="#9-4-UserList-js" class="headerlink" title="9.4 UserList.js"></a>9.4 UserList.js</h3><p>src\components\UserList.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-na8jtnlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-na8jtnlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, &#123; <span class="hljs-title class_">Component</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">Link</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../react-router-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">UserAPI</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../utils&#x27;</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">UserList</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> &#123;<br>    state = &#123; <span class="hljs-attr">users</span>: [] &#125;<br>    <span class="hljs-title function_">componentDidMount</span>(<span class="hljs-params"></span>) &#123;<br>        <span class="hljs-keyword">let</span> users = <span class="hljs-title class_">UserAPI</span>.<span class="hljs-title function_">list</span>();<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>(&#123; users &#125;);<br>    &#125;<br>    <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>) &#123;<br>        <span class="hljs-keyword">return</span> (<br>            <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> &gt;</span></span><br><span class="language-xml">                &#123;</span><br><span class="language-xml">                    this.state.users.map((user, index) =&gt; (</span><br><span class="language-xml">                        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>  <span class="hljs-attr">key</span>=<span class="hljs-string">&#123;index&#125;</span>&gt;</span></span><br><span class="language-xml">                            <span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&#123;&#123;</span> <span class="hljs-attr">pathname:</span> `/<span class="hljs-attr">user</span>/<span class="hljs-attr">detail</span>/$&#123;<span class="hljs-attr">user.id</span>&#125;`, <span class="hljs-attr">state:</span> <span class="hljs-attr">user</span> &#125;&#125;&gt;</span>&#123;user.username&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span></span><br><span class="language-xml">                        <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">                    ))</span><br><span class="language-xml">                &#125;</span><br><span class="language-xml">            <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span><br>        )<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="9-5-UserDetail-js"><a href="#9-5-UserDetail-js" class="headerlink" title="9.5 UserDetail.js"></a>9.5 UserDetail.js</h3><p>src\components\UserDetail.js</p>
<figure class="highlight pf"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-jvqboklacl5vpl"></i><span>pf</span><div class="collapse show" id="collapse-jvqboklacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs pf">import React, &#123; Component &#125; <span class="hljs-keyword">from</span> &#x27;react&#x27;;<br>import &#123;UserAPI&#125; <span class="hljs-keyword">from</span> &#x27;../utils&#x27;;<br>export <span class="hljs-keyword">default</span> class UserDetail extends Component &#123;<br>    <span class="hljs-keyword">state</span> = &#123;<br>        <span class="hljs-keyword">user</span>: &#123;&#125;<br>    &#125;<br>    componentDidMount() &#123;<br>        let <span class="hljs-keyword">user</span> = this.props.location.<span class="hljs-keyword">state</span>;<br>        if (!<span class="hljs-keyword">user</span>) &#123;<br>            let id = this.props.<span class="hljs-built_in">match</span>.params.id;<br>            <span class="hljs-keyword">user</span> = UserAPI.find(id);<br>        &#125;<br>        if (<span class="hljs-keyword">user</span>) this.<span class="hljs-built_in">set</span>State(&#123; <span class="hljs-keyword">user</span> &#125;);<br>    &#125;<br>    render() &#123;<br>        let <span class="hljs-keyword">user</span> = this.<span class="hljs-keyword">state</span>.<span class="hljs-keyword">user</span>;<br>        return (<br>            <span class="hljs-variable">&lt;div&gt;</span><br>                &#123;<span class="hljs-keyword">user</span>.id&#125;:&#123;<span class="hljs-keyword">user</span>.username&#125;<br>            &lt;/div&gt;<br>        )<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h2 id="10-受保护路由"><a href="#10-受保护路由" class="headerlink" title="10.受保护路由 "></a>10.受保护路由 </h2><h3 id="10-1-src-index-js"><a href="#10-1-src-index-js" class="headerlink" title="10.1 src\index.js"></a>10.1 src\index.js</h3><p>src\index.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-7tey6dlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-7tey6dlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-dom&#x27;</span>;<br>+<span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">HashRouter</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">Router</span>,<span class="hljs-title class_">Route</span>,<span class="hljs-title class_">Switch</span>,<span class="hljs-title class_">Redirect</span>,<span class="hljs-title class_">Link</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./react-router-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Home</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Home&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">User</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/User&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Profile</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Profile&#x27;</span>;<br>+<span class="hljs-keyword">import</span> <span class="hljs-title class_">Protected</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Protected&#x27;</span>;<br>+<span class="hljs-keyword">import</span> <span class="hljs-title class_">Login</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Login&#x27;</span>;<br><span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/user&quot;</span> &gt;</span>用户管理<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/profile&quot;</span> &gt;</span>个人中心<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Home&#125;</span> <span class="hljs-attr">exact</span>/&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/user&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;User&#125;</span> /&gt;</span></span><br><span class="language-xml">+         <span class="hljs-tag">&lt;<span class="hljs-name">Protected</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/profile&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Profile&#125;/</span>&gt;</span></span><br><span class="language-xml">+         <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/login&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Login&#125;/</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Redirect</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span>/&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span></span><br>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;root&#x27;</span>));<br><br></code></pre></td></tr></table></div></figure>

<h3 id="10-2-Route-js"><a href="#10-2-Route-js" class="headerlink" title="10.2 Route.js"></a>10.2 Route.js</h3><p>src\react-router\Route.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-bii7oflacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-bii7oflacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">RouterContext</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><span class="hljs-keyword">import</span> matchPath <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./matchPath&#x27;</span>;<br><span class="hljs-keyword">class</span> <span class="hljs-title class_">Route</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>&#123;<br>    <span class="hljs-keyword">static</span> contextType = <span class="hljs-title class_">RouterContext</span><br>    <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-keyword">const</span> &#123;history,location&#125; = <span class="hljs-variable language_">this</span>.<span class="hljs-property">context</span>;<br>+       <span class="hljs-keyword">const</span> &#123;<span class="hljs-attr">component</span>:<span class="hljs-title class_">RouteComponent</span>,computedMatch,render&#125; = <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>;<br>        <span class="hljs-keyword">const</span> match = computedMatch ? computedMatch : <span class="hljs-title function_">matchPath</span>(location.<span class="hljs-property">pathname</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>);<br>        <span class="hljs-keyword">let</span> routeProps = &#123;history,location&#125;;<br>        <span class="hljs-keyword">let</span> element=<span class="hljs-literal">null</span>;<br>+       <span class="hljs-keyword">if</span> (match) &#123;<br>+           routeProps.<span class="hljs-property">match</span> = match;<br>+           <span class="hljs-keyword">if</span> (<span class="hljs-title class_">RouteComponent</span>) &#123;<br>+               element = <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">RouteComponent</span> &#123;<span class="hljs-attr">...routeProps</span>&#125; /&gt;</span></span><br>+           &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (render) &#123;<br>+               element=  <span class="hljs-title function_">render</span>(routeProps);<br>+           &#125; <span class="hljs-keyword">else</span> &#123;<br>+               element=  <span class="hljs-literal">null</span>;<br>+           &#125;<br>+       &#125;<span class="hljs-keyword">else</span> &#123;<br>+            element=  <span class="hljs-literal">null</span>;<br>+       &#125;<br>        <span class="hljs-keyword">return</span> (<br>            <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">RouterContext.Provider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&#123;routeProps&#125;</span>&gt;</span></span><br><span class="language-xml">                &#123;element&#125;</span><br><span class="language-xml">            <span class="hljs-tag">&lt;/<span class="hljs-name">RouterContext.Provider</span>&gt;</span></span><br>        )<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Route</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="10-3-Login-js"><a href="#10-3-Login-js" class="headerlink" title="10.3 Login.js"></a>10.3 Login.js</h3><p>src\components\Login.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-5z62ktlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-5z62ktlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">class</span> <span class="hljs-title class_">Login</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>&#123;<br>    login = <span class="hljs-function">()=&gt;</span>&#123;<br>        <span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">setItem</span>(<span class="hljs-string">&#x27;login&#x27;</span>,<span class="hljs-string">&#x27;true&#x27;</span>);<br>        <span class="hljs-keyword">let</span> to=<span class="hljs-string">&#x27;/&#x27;</span>;<br>        <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>.<span class="hljs-property">location</span>.<span class="hljs-property">state</span>)&#123;<br>            to=<span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>.<span class="hljs-property">location</span>.<span class="hljs-property">state</span>.<span class="hljs-property">from</span>||<span class="hljs-string">&#x27;/&#x27;</span>;<br>        &#125;<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>.<span class="hljs-property">history</span>.<span class="hljs-title function_">push</span>(to);<br>    &#125;<br>    <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-keyword">return</span> (<br>            <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">&#123;this.login&#125;</span>&gt;</span>登录<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br>        )<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Login</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="10-4-Protected-js"><a href="#10-4-Protected-js" class="headerlink" title="10.4 Protected.js"></a>10.4 Protected.js</h3><p>src\components\Protected.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-nbscwylacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-nbscwylacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">Route</span>,<span class="hljs-title class_">Redirect</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../react-router-dom&#x27;</span>;<br><span class="hljs-keyword">const</span> <span class="hljs-title function_">Protected</span> =  (<span class="hljs-params">props</span>)=&gt;&#123;<br>    <span class="hljs-keyword">let</span> &#123;<span class="hljs-attr">component</span>:<span class="hljs-title class_">RouteComponent</span>,path&#125; = props;<br>    <span class="hljs-keyword">return</span> (<br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&#123;path&#125;</span> <span class="hljs-attr">render</span>=<span class="hljs-string">&#123;</span></span></span><br><span class="hljs-tag"><span class="language-xml">            (<span class="hljs-attr">routeProps</span>)=&gt;</span>(</span><br><span class="language-xml">                localStorage.getItem(&#x27;login&#x27;)?<span class="hljs-tag">&lt;<span class="hljs-name">RouteComponent</span> &#123;<span class="hljs-attr">...routeProps</span>&#125;/&gt;</span>:</span><br><span class="language-xml">                <span class="hljs-tag">&lt;<span class="hljs-name">Redirect</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&#123;&#123;pathname:</span>&#x27;/<span class="hljs-attr">login</span>&#x27;,<span class="hljs-attr">state:</span>&#123;<span class="hljs-attr">from:path</span>&#125;&#125;&#125;/&gt;</span></span><br><span class="language-xml">            )</span><br><span class="language-xml">        &#125;/&gt;</span><br>    )<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Protected</span>;<br><br></code></pre></td></tr></table></div></figure>

<h2 id="11-NavLink"><a href="#11-NavLink" class="headerlink" title="11.NavLink "></a>11.NavLink </h2><h3 id="11-1-public-index-html"><a href="#11-1-public-index-html" class="headerlink" title="11.1 public\index.html"></a>11.1 public\index.html</h3><p>public\index.html</p>
<figure class="highlight xml"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-3kaz2blacl5vpl"></i><span>xml</span><div class="collapse show" id="collapse-3kaz2blacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span> /&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1&quot;</span> /&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;theme-color&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;#000000&quot;</span> /&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span></span><br><span class="hljs-tag">      <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;description&quot;</span></span><br><span class="hljs-tag">      <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;Web site created using create-react-app&quot;</span></span><br><span class="hljs-tag">    /&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>React App<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">+      <span class="hljs-selector-class">.strong</span>&#123;</span><br><span class="language-css">+        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>;</span><br><span class="language-css">+      &#125;</span><br><span class="language-css">+      <span class="hljs-selector-class">.active</span>&#123;</span><br><span class="language-css">+        <span class="hljs-attribute">background-color</span>: green;</span><br><span class="language-css">+      &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;root&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></div></figure>

<h3 id="11-2-src-index-js"><a href="#11-2-src-index-js" class="headerlink" title="11.2 src\index.js"></a>11.2 src\index.js</h3><p>src\index.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-9hhzdnlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-9hhzdnlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-dom&#x27;</span>;<br>+<span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">HashRouter</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">Router</span>,<span class="hljs-title class_">Route</span>,<span class="hljs-title class_">Switch</span>,<span class="hljs-title class_">Redirect</span>,<span class="hljs-title class_">NavLink</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./react-router-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Home</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Home&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">User</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/User&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Profile</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Profile&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Protected</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Protected&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Login</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Login&#x27;</span>;<br><span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">+        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;strong&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&#123;&#123;textDecoration:</span> &#x27;<span class="hljs-attr">line-through</span>&#x27;&#125;&#125; <span class="hljs-attr">activeStyle</span>=<span class="hljs-string">&#123;&#123;color:</span>&#x27;<span class="hljs-attr">red</span>&#x27;&#125;&#125; <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">exact</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">+        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">activeStyle</span>=<span class="hljs-string">&#123;&#123;color:</span>&#x27;<span class="hljs-attr">red</span>&#x27;&#125;&#125;  <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/user&quot;</span>&gt;</span>User<span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">+        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">activeStyle</span>=<span class="hljs-string">&#123;&#123;color:</span>&#x27;<span class="hljs-attr">red</span>&#x27;&#125;&#125;  <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/profile&quot;</span>&gt;</span>Profile<span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Home&#125;</span> <span class="hljs-attr">exact</span>/&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/user&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;User&#125;</span> /&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Protected</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/profile&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Profile&#125;/</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/login&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Login&#125;/</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Redirect</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span>/&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span></span><br>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;root&#x27;</span>));<br><br></code></pre></td></tr></table></div></figure>

<h3 id="11-3-NavLink-js"><a href="#11-3-NavLink-js" class="headerlink" title="11.3 NavLink.js"></a>11.3 NavLink.js</h3><p>src\react-router-dom\NavLink.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-u6vz1mlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-u6vz1mlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">Route</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../react-router&#x27;</span>;<br><span class="hljs-keyword">import</span> matchPath <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../react-router/matchPath&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Link</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Link&#x27;</span>;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">NavLink</span>(<span class="hljs-params">props</span>)&#123;<br>    <span class="hljs-keyword">const</span> &#123;<br>        <span class="hljs-attr">to</span>:path,<span class="hljs-comment">//Link指向的路径</span><br>        <span class="hljs-attr">className</span>:classNameProp=<span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">//基本的类名</span><br>        <span class="hljs-attr">style</span>:styleProp=&#123;&#125;,<span class="hljs-comment">//基本的行内样式</span><br>        activeClassName=<span class="hljs-string">&#x27;active&#x27;</span>,<span class="hljs-comment">//激活的类名</span><br>        activeStyle=&#123;&#125;,<span class="hljs-comment">//激活的行内样式</span><br>        children,<span class="hljs-comment">//儿子</span><br>        exact<span class="hljs-comment">//是否要精确匹配</span><br>    &#125;= props;<br>     <span class="hljs-keyword">return</span> (<br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&#123;path&#125;</span> <span class="hljs-attr">exact</span>=<span class="hljs-string">&#123;exact&#125;</span>&gt;</span></span><br><span class="language-xml">            &#123;</span><br><span class="language-xml">                (&#123;match&#125;)=&gt;&#123;</span><br><span class="language-xml">                    let className = match?joinClassNames(classNameProp,activeClassName):classNameProp;</span><br><span class="language-xml">                    let style =match?&#123;...styleProp,...activeStyle&#125;:styleProp;</span><br><span class="language-xml">                    let linkProps = &#123;</span><br><span class="language-xml">                        className,</span><br><span class="language-xml">                        style,</span><br><span class="language-xml">                        to:path,</span><br><span class="language-xml">                        children</span><br><span class="language-xml">                    &#125;</span><br><span class="language-xml">                    return <span class="hljs-tag">&lt;<span class="hljs-name">Link</span> &#123;<span class="hljs-attr">...linkProps</span>&#125;/&gt;</span></span><br><span class="language-xml">                &#125;</span><br><span class="language-xml">            &#125;</span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">Route</span>&gt;</span></span><br>     )   <br>&#125;<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">NavLink</span>(<span class="hljs-params">props</span>)&#123;<br>    <span class="hljs-keyword">let</span> context = <span class="hljs-title class_">React</span>.<span class="hljs-title function_">useContext</span>(<span class="hljs-title class_">RouterContext</span>);<br>    <span class="hljs-keyword">let</span> &#123;<span class="hljs-attr">location</span>:&#123;pathname&#125;&#125;= context;<br>    <span class="hljs-keyword">const</span> &#123;<br>        <span class="hljs-attr">to</span>:path,<span class="hljs-comment">//Link指向的路径</span><br>        <span class="hljs-attr">className</span>:classNameProp=<span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">//基本的类名</span><br>        <span class="hljs-attr">style</span>:styleProp=&#123;&#125;,<span class="hljs-comment">//基本的行内样式</span><br>        activeClassName=<span class="hljs-string">&#x27;active&#x27;</span>,<span class="hljs-comment">//激活的类名</span><br>        activeStyle=&#123;&#125;,<span class="hljs-comment">//激活的行内样式</span><br>        children,<span class="hljs-comment">//儿子</span><br>        exact<span class="hljs-comment">//是否要精确匹配</span><br>    &#125;= props;<br>    <span class="hljs-comment">//pathname浏览器的路径 path来自于NavLink的配置</span><br>    <span class="hljs-keyword">let</span> isActive = <span class="hljs-title function_">matchPath</span>(pathname,&#123;path,exact&#125;);<br>    <span class="hljs-keyword">let</span> className = isActive?<span class="hljs-title function_">joinClassNames</span>(classNameProp,activeClassName):classNameProp;<br>    <span class="hljs-keyword">let</span> style = isActive?&#123;...styleProp,...activeStyle&#125;:styleProp;<br>    <span class="hljs-keyword">let</span> linkProps = &#123;<br>        className,<br>        style,<br>        <span class="hljs-attr">to</span>:path,<br>        children<br>    &#125;<br>    <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> &#123;<span class="hljs-attr">...linkProps</span>&#125;/&gt;</span></span>;<br>&#125;<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">joinClassNames</span>(<span class="hljs-params">...classnames</span>)&#123;<br>  <span class="hljs-keyword">return</span> classnames.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">c</span>=&gt;</span>c).<span class="hljs-title function_">join</span>(<span class="hljs-string">&#x27; &#x27;</span>);<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">NavLink</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="11-4-react-router-dom-index-js"><a href="#11-4-react-router-dom-index-js" class="headerlink" title="11.4 react-router-dom\index.js"></a>11.4 react-router-dom\index.js</h3><p>src\react-router-dom\index.js</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-6xqv6tlacl5vpl"></i><span>coffeescript</span><div class="collapse show" id="collapse-6xqv6tlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">export</span> * <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../react-router&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> HashRouter&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./HashRouter&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> BrowserRouter&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./BrowserRouter&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Link&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Link&#x27;</span>;<br>+<span class="hljs-keyword">export</span> &#123; <span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> NavLink &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./NavLink&quot;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h2 id="12-withRouter"><a href="#12-withRouter" class="headerlink" title="12.withRouter "></a>12.withRouter </h2><h3 id="12-1-src-index-js"><a href="#12-1-src-index-js" class="headerlink" title="12.1 src\index.js"></a>12.1 src\index.js</h3><p>src\index.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-h064cmlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-h064cmlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">HashRouter</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">Router</span>,<span class="hljs-title class_">Route</span>,<span class="hljs-title class_">Switch</span>,<span class="hljs-title class_">Redirect</span>,<span class="hljs-title class_">NavLink</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./react-router-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Home</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Home&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">User</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/User&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Profile</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Profile&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Protected</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Protected&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Login</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Login&#x27;</span>;<br>+<span class="hljs-keyword">import</span> <span class="hljs-title class_">NavHeader</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/NavHeader&#x27;</span>;<br><span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;&gt;</span></span><br><span class="language-xml">+      <span class="hljs-tag">&lt;<span class="hljs-name">NavHeader</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;欢迎光临&quot;</span>/&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;strong&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&#123;&#123;textDecoration:</span> &#x27;<span class="hljs-attr">line-through</span>&#x27;&#125;&#125; <span class="hljs-attr">activeStyle</span>=<span class="hljs-string">&#123;&#123;color:</span>&#x27;<span class="hljs-attr">red</span>&#x27;&#125;&#125; <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">exact</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">activeStyle</span>=<span class="hljs-string">&#123;&#123;color:</span>&#x27;<span class="hljs-attr">red</span>&#x27;&#125;&#125;  <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/user&quot;</span>&gt;</span>User<span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">activeStyle</span>=<span class="hljs-string">&#123;&#123;color:</span>&#x27;<span class="hljs-attr">red</span>&#x27;&#125;&#125;  <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/profile&quot;</span>&gt;</span>Profile<span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Home&#125;</span> <span class="hljs-attr">exact</span>/&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/user&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;User&#125;</span> /&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Protected</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/profile&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Profile&#125;/</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/login&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Login&#125;/</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Redirect</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span>/&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/&gt;</span></span><br>    &lt;/<span class="hljs-title class_">Router</span>&gt;<br>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;root&#x27;</span>));<br><br></code></pre></td></tr></table></div></figure>

<h3 id="12-2-NavHeader-js"><a href="#12-2-NavHeader-js" class="headerlink" title="12.2 NavHeader.js"></a>12.2 NavHeader.js</h3><p>src\components\NavHeader.js</p>
<figure class="highlight scala"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-5lykwblacl5vpl"></i><span>scala</span><div class="collapse show" id="collapse-5lykwblacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs scala"><span class="hljs-keyword">import</span> <span class="hljs-type">React</span> from &#x27;react&#x27;;<br><span class="hljs-keyword">import</span> &#123;withRouter&#125; from &#x27;../react-router-dom&#x27;;<br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">NavHeader</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>&#123;<br>    render()&#123;<br>        <span class="hljs-keyword">return</span> (<br>            &lt;div onClick=&#123;()=&gt;<span class="hljs-keyword">this</span>.props.history.push(&#x27;/&#x27;)&#125; &gt;&#123;<span class="hljs-keyword">this</span>.props.title&#125;&lt;/div&gt;<br>        )<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> withRouter(<span class="hljs-type">NavHeader</span>);<br><br></code></pre></td></tr></table></div></figure>

<h3 id="12-3-withRouter-js"><a href="#12-3-withRouter-js" class="headerlink" title="12.3 withRouter.js"></a>12.3 withRouter.js</h3><p>src\react-router\withRouter.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-gz3jaglacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-gz3jaglacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">RouterContext</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">withRouter</span>(<span class="hljs-params">OldComponent</span>)&#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-params">props</span> =&gt;</span> &#123;<br>        <span class="hljs-keyword">return</span> (<br>            <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">RouterContext.Consumer</span>&gt;</span></span><br><span class="language-xml">                &#123;</span><br><span class="language-xml">                    contextValue =&gt;&#123;</span><br><span class="language-xml">                        return <span class="hljs-tag">&lt;<span class="hljs-name">OldComponent</span> &#123;<span class="hljs-attr">...props</span>&#125; &#123;<span class="hljs-attr">...contextValue</span>&#125;/&gt;</span></span><br><span class="language-xml">                    &#125;</span><br><span class="language-xml">                &#125;</span><br><span class="language-xml">            <span class="hljs-tag">&lt;/<span class="hljs-name">RouterContext.Consumer</span>&gt;</span></span><br>        )<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> withRouter;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="12-4-react-router-index-js"><a href="#12-4-react-router-index-js" class="headerlink" title="12.4 react-router\index.js"></a>12.4 react-router\index.js</h3><p>src\react-router\index.js</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-0ul6zclacl5vpl"></i><span>coffeescript</span><div class="collapse show" id="collapse-0ul6zclacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Route&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Route&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Router&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Router&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> __RouterContext&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> matchPath&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./matchPath&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Switch&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Switch&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Redirect&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Redirect&#x27;</span>;<br>+<span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> withRouter&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./withRouter&#x27;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h2 id="13-Prompt"><a href="#13-Prompt" class="headerlink" title="13.Prompt "></a>13.Prompt </h2><h3 id="13-1-src-index-js"><a href="#13-1-src-index-js" class="headerlink" title="13.1 src\index.js"></a>13.1 src\index.js</h3><p>src\index.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-wcjzkzlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-wcjzkzlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-dom&#x27;</span>;<br>+<span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">BrowserRouter</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">Router</span>,<span class="hljs-title class_">Route</span>,<span class="hljs-title class_">Switch</span>,<span class="hljs-title class_">Redirect</span>,<span class="hljs-title class_">NavLink</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./react-router-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Home</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Home&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">User</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/User&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Profile</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Profile&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Protected</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Protected&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Login</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Login&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">NavHeader</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/NavHeader&#x27;</span>;<br><span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<br>+    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span> <span class="hljs-attr">getUserConfirmation</span>=<span class="hljs-string">&#123;()</span>=&gt;</span>window.confirm&#125;&gt;</span><br><span class="language-xml">      <span class="hljs-tag">&lt;&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">NavHeader</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;欢迎光临&quot;</span>/&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;strong&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&#123;&#123;textDecoration:</span> &#x27;<span class="hljs-attr">line-through</span>&#x27;&#125;&#125; <span class="hljs-attr">activeStyle</span>=<span class="hljs-string">&#123;&#123;color:</span>&#x27;<span class="hljs-attr">red</span>&#x27;&#125;&#125; <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">exact</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">activeStyle</span>=<span class="hljs-string">&#123;&#123;color:</span>&#x27;<span class="hljs-attr">red</span>&#x27;&#125;&#125;  <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/user&quot;</span>&gt;</span>User<span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">activeStyle</span>=<span class="hljs-string">&#123;&#123;color:</span>&#x27;<span class="hljs-attr">red</span>&#x27;&#125;&#125;  <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/profile&quot;</span>&gt;</span>Profile<span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Home&#125;</span> <span class="hljs-attr">exact</span>/&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/user&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;User&#125;</span> /&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Protected</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/profile&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Profile&#125;/</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/login&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Login&#125;/</span>&gt;</span></span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Redirect</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span>/&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">Switch</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/&gt;</span></span><br>    &lt;/<span class="hljs-title class_">Router</span>&gt;<br>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;root&#x27;</span>));<br><br></code></pre></td></tr></table></div></figure>

<h3 id="13-2-UserAdd-js"><a href="#13-2-UserAdd-js" class="headerlink" title="13.2 UserAdd.js"></a>13.2 UserAdd.js</h3><p>src\components\UserAdd.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-44xboqlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-44xboqlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, &#123; <span class="hljs-title class_">Component</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">UserAPI</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../utils&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">Prompt</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../react-router-dom&#x27;</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">UserAdd</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> &#123;<br>    usernameRef<br>+    state = &#123;<span class="hljs-attr">isBlocking</span>:<span class="hljs-literal">false</span>&#125;<br>    <span class="hljs-title function_">constructor</span>(<span class="hljs-params">props</span>) &#123;<br>        <span class="hljs-variable language_">super</span>(props);<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">usernameRef</span> = <span class="hljs-title class_">React</span>.<span class="hljs-title function_">createRef</span>();<br>    &#125;<br>    handleSubmit = <span class="hljs-function">(<span class="hljs-params">event</span>) =&gt;</span> &#123;<br>        event.<span class="hljs-title function_">preventDefault</span>();<br>+        <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>(&#123;<br>+            <span class="hljs-attr">isBlocking</span>:<span class="hljs-literal">false</span><br>+        &#125;,<span class="hljs-function">()=&gt;</span>&#123;<br>            <span class="hljs-keyword">let</span> username = <span class="hljs-variable language_">this</span>.<span class="hljs-property">usernameRef</span>.<span class="hljs-property">current</span>.<span class="hljs-property">value</span>;<br>            <span class="hljs-title class_">UserAPI</span>.<span class="hljs-title function_">add</span>(&#123; <span class="hljs-attr">id</span>: <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>() + <span class="hljs-string">&#x27;&#x27;</span>, username &#125;);<br>            <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>.<span class="hljs-property">history</span>.<span class="hljs-title function_">push</span>(<span class="hljs-string">&#x27;/user/list&#x27;</span>);<br>+        &#125;);<br>    &#125;<br>    <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>) &#123;<br>        <span class="hljs-keyword">return</span> (<br>            <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">&#123;this.handleSubmit&#125;</span>&gt;</span></span><br><span class="language-xml">+                 <span class="hljs-tag">&lt;<span class="hljs-name">Prompt</span></span></span><br><span class="hljs-tag"><span class="language-xml">+                   <span class="hljs-attr">when</span>=<span class="hljs-string">&#123;this.state.isBlocking&#125;</span></span></span><br><span class="hljs-tag"><span class="language-xml">+                   <span class="hljs-attr">message</span> = <span class="hljs-string">&#123;</span></span></span><br><span class="hljs-tag"><span class="language-xml">+                       (<span class="hljs-attr">location</span>)=&gt;</span>`请问你确定要跳转到$&#123;location.pathname&#125;吗?`</span><br><span class="language-xml">+                   &#125;</span><br><span class="language-xml">+                /&gt;</span><br><span class="language-xml">+               <span class="hljs-tag">&lt;<span class="hljs-name">input</span>  <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&#123;this.usernameRef&#125;</span>  <span class="hljs-attr">onChange</span>=<span class="hljs-string">&#123;(event)</span> =&gt;</span> &#123;</span><br><span class="language-xml">+                   this.setState(&#123; isBlocking: event.target.value.length &gt; 0 &#125;);</span><br><span class="language-xml">+               &#125;&#125; /&gt;</span><br><span class="language-xml">                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span> &gt;</span>提交<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br><span class="language-xml">            <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></span><br>        )<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="13-3-Prompt-js"><a href="#13-3-Prompt-js" class="headerlink" title="13.3 Prompt.js"></a>13.3 Prompt.js</h3><p>src\react-router\Prompt.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-7e88belacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-7e88belacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">RouterContext</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">LifeCycle</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./LifeCycle&#x27;</span>;<br><span class="hljs-comment">//函数组件</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">Prompt</span>(<span class="hljs-params">props</span>)&#123;<br>    <span class="hljs-keyword">let</span> value = <span class="hljs-title class_">React</span>.<span class="hljs-title function_">useContext</span>(<span class="hljs-title class_">RouterContext</span>);<br>    <span class="hljs-title class_">React</span>.<span class="hljs-title function_">useEffect</span>(<span class="hljs-function">()=&gt;</span>&#123;<br>        <span class="hljs-keyword">return</span>  value.<span class="hljs-property">history</span>.<span class="hljs-title function_">block</span>(props.<span class="hljs-property">message</span>)<br>    &#125;);<br>    <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>&#125;<br><span class="hljs-comment">//类组件</span><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">Prompt</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>&#123;<br>    <span class="hljs-keyword">static</span> contextType = <span class="hljs-title class_">RouterContext</span>;<br>    <span class="hljs-title function_">componentDidMount</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-keyword">const</span> block = <span class="hljs-variable language_">this</span>.<span class="hljs-property">context</span>.<span class="hljs-property">history</span>.<span class="hljs-property">block</span>;<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">release</span> = <span class="hljs-title function_">block</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>.<span class="hljs-property">message</span>)<br>    &#125;<br>    <span class="hljs-title function_">componentWillUnmount</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">release</span>()<br>    &#125;<br>    <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-keyword">return</span>  <span class="hljs-literal">null</span>;<br>    &#125;<br>&#125;<br><span class="hljs-comment">//源码</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">Prompt</span>(<span class="hljs-params">&#123;when,message&#125;</span>)&#123;<br>    <span class="hljs-keyword">return</span> (<br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">RouterContext.Consumer</span>&gt;</span></span><br><span class="language-xml">            &#123;</span><br><span class="language-xml">                (value)=&gt;&#123;</span><br><span class="language-xml">                    //如果不需要阻止跳转，则可以直接返回null,什么都不做</span><br><span class="language-xml">                    if(!when)return null;</span><br><span class="language-xml">                    //需要给history对象上添加一个block方法</span><br><span class="language-xml">                    const block = value.history.block;</span><br><span class="language-xml">                    return (</span><br><span class="language-xml">                        <span class="hljs-tag">&lt;<span class="hljs-name">LifeCycle</span></span></span><br><span class="hljs-tag"><span class="language-xml">                           <span class="hljs-attr">onMount</span>=<span class="hljs-string">&#123;lifeCycleInstance</span>=&gt;</span>lifeCycleInstance.release = block(message)&#125;</span><br><span class="language-xml">                           onUnMount=&#123;lifeCycleInstance=&gt;lifeCycleInstance.release()&#125;</span><br><span class="language-xml">                        /&gt;</span><br><span class="language-xml">                    )</span><br><span class="language-xml"></span><br><span class="language-xml">                &#125;</span><br><span class="language-xml">            &#125;</span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">RouterContext.Consumer</span>&gt;</span></span><br>    )<br>&#125;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Prompt</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="13-4-react-router-index-js"><a href="#13-4-react-router-index-js" class="headerlink" title="13.4 react-router\index.js"></a>13.4 react-router\index.js</h3><p>src\react-router\index.js</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-1r361olacl5vpl"></i><span>coffeescript</span><div class="collapse show" id="collapse-1r361olacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Route&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Route&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Router&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Router&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> __RouterContext&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> matchPath&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./matchPath&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Switch&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Switch&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Redirect&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Redirect&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> withRouter&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./withRouter&#x27;</span>;<br>+<span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Prompt&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Prompt&#x27;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="13-5-createBrowserHistory-js"><a href="#13-5-createBrowserHistory-js" class="headerlink" title="13.5 createBrowserHistory.js"></a>13.5 createBrowserHistory.js</h3><p>src\history\createBrowserHistory.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-nk9mgllacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-nk9mgllacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">createBrowserHistory</span>(<span class="hljs-params">props</span>)&#123;<br>+   <span class="hljs-keyword">let</span> confirm =props.<span class="hljs-property">getUserConfirmation</span>?props.<span class="hljs-title function_">getUserConfirmation</span>():<span class="hljs-variable language_">window</span>.<span class="hljs-property">confirm</span>;<br>    <span class="hljs-keyword">let</span> globalHistory = <span class="hljs-variable language_">window</span>.<span class="hljs-property">history</span>;<br>    <span class="hljs-keyword">let</span> listeners = [];<br>+   <span class="hljs-keyword">let</span> message;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">go</span>(<span class="hljs-params">n</span>)&#123;<br>        globalHistory.<span class="hljs-title function_">go</span>(n);<br>    &#125;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">goBack</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-title function_">go</span>(-<span class="hljs-number">1</span>)<br>    &#125;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">goForward</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-title function_">go</span>(<span class="hljs-number">1</span>)<br>    &#125;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">listen</span>(<span class="hljs-params">listener</span>)&#123;<br>        listeners.<span class="hljs-title function_">push</span>(listener);<br>        <span class="hljs-keyword">return</span> <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;<span class="hljs-comment">//unlisten</span><br>            listeners = listeners.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">l</span>=&gt;</span>l!==listener);<br>        &#125;<br>    &#125;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">setState</span>(<span class="hljs-params">newState</span>)&#123;<br>        <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">assign</span>(history,newState);<br>        history.<span class="hljs-property">length</span> = globalHistory.<span class="hljs-property">length</span>;<br>        listeners.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">listener</span>=&gt;</span><span class="hljs-title function_">listener</span>(history.<span class="hljs-property">location</span>));<br>    &#125;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> &#123;<span class="hljs-type">*</span>&#125; pathname 可能是对象，也可能是字符串</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> &#123;<span class="hljs-type">*</span>&#125; state 这个路径的状态对象是什么,只是一个路径的描述信息，可以放任何</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">push</span>(<span class="hljs-params">pathname, state</span>)&#123;<br>        <span class="hljs-keyword">const</span> action = <span class="hljs-string">&#x27;PUSH&#x27;</span>;<span class="hljs-comment">//表示发了什么动作引起了路径变化 POP PUSH</span><br>        <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> pathname === <span class="hljs-string">&#x27;object&#x27;</span>)&#123;<br>            state=pathname.<span class="hljs-property">state</span>;<br>            pathname= pathname.<span class="hljs-property">pathname</span>;<br>        &#125;<br>+        <span class="hljs-keyword">if</span>(message)&#123;<br>+            <span class="hljs-keyword">let</span> showMessage = <span class="hljs-title function_">message</span>(&#123;pathname&#125;);<br>+            <span class="hljs-keyword">let</span> allow = <span class="hljs-title function_">confirm</span>(showMessage);<br>+            <span class="hljs-keyword">if</span>(!allow)&#123;<br>+                <span class="hljs-keyword">return</span>;<br>+            &#125;<br>+        &#125;<br>        globalHistory.<span class="hljs-title function_">pushState</span>(state,<span class="hljs-literal">null</span>,pathname);<br>        <span class="hljs-keyword">let</span> location = &#123;state,pathname&#125;;<br>        <span class="hljs-title function_">setState</span>(&#123;action,location&#125;);<br>    &#125;<br>+    <span class="hljs-keyword">function</span> <span class="hljs-title function_">block</span>(<span class="hljs-params">newMessage</span>)&#123;<br>+        message=newMessage;<br>+        <span class="hljs-keyword">return</span> <span class="hljs-function">()=&gt;</span> message=<span class="hljs-literal">null</span>;<br>+    &#125;<br>    <span class="hljs-keyword">const</span> history = &#123;<br>        <span class="hljs-attr">action</span>: <span class="hljs-string">&quot;POP&quot;</span>,<br>        go,<br>        goBack,<br>        goForward,<br>        listen,<br>        <span class="hljs-attr">location</span>:&#123;<span class="hljs-attr">pathname</span>:<span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">pathname</span>,<span class="hljs-attr">state</span>:globalHistory.<span class="hljs-property">state</span>&#125;,<br>        push,<br>+        block<br>    &#125;<br>    <span class="hljs-keyword">return</span> history;<br>&#125;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> createBrowserHistory;<br><br></code></pre></td></tr></table></div></figure>

<h2 id="15-hooks"><a href="#15-hooks" class="headerlink" title="15.hooks "></a>15.hooks </h2><h3 id="15-1-src-index-js"><a href="#15-1-src-index-js" class="headerlink" title="15.1 src\index.js"></a>15.1 src\index.js</h3><p>src\index.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-ce3c21lacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-ce3c21lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">BrowserRouter</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">Router</span>,<span class="hljs-title class_">Route</span>,<span class="hljs-title class_">Link</span>,<br>useParams,<br>useLocation,<br>useHistory,<br>useRouteMatch<br>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./react-router-dom&#x27;</span>;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">Home</span>(<span class="hljs-params"></span>)&#123;<br>  <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;<br>&#125;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">UserDetail</span>(<span class="hljs-params"></span>)&#123;<br>  <span class="hljs-keyword">let</span> params = <span class="hljs-title function_">useParams</span>();<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;params&#x27;</span>,params);<br>  <span class="hljs-keyword">let</span> location = <span class="hljs-title function_">useLocation</span>();<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;location&#x27;</span>,location);<br>  <span class="hljs-keyword">let</span> history = <span class="hljs-title function_">useHistory</span>();<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;history&#x27;</span>,history);<br><span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>User id:&#123;params.id&#125; <span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span>name:&#123;location.state.name&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;<br>&#125;<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">Post</span>(<span class="hljs-params"></span>)&#123;<br>  <span class="hljs-keyword">let</span> match = <span class="hljs-title function_">useRouteMatch</span>(&#123;<br>    <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/post/:id&#x27;</span>,<br>    <span class="hljs-attr">strict</span>:<span class="hljs-literal">true</span>,<br>    <span class="hljs-attr">sensitive</span>:<span class="hljs-literal">true</span><br>  &#125;);<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;match&#x27;</span>,match);<br>  <span class="hljs-keyword">return</span> match?<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>id:&#123;match.params.id&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>:<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Not Found<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>&#125;<br> <span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span>  <span class="hljs-attr">to</span>=<span class="hljs-string">&#123;&#123;pathname:</span>&quot;/<span class="hljs-attr">user</span>/<span class="hljs-attr">detail</span>/<span class="hljs-attr">1</span>&quot;,<span class="hljs-attr">state:</span>&#123;<span class="hljs-attr">id:1</span>,<span class="hljs-attr">name:</span>&#x27;<span class="hljs-attr">珠峰架构</span>&#x27;&#125;&#125;&#125;&gt;</span>用户1详情<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/post/1&quot;</span>&gt;</span>贴子<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Home&#125;/</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/user/detail/:id&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;UserDetail&#125;/</span>&gt;</span>   </span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/post/:id&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;Post&#125;/</span>&gt;</span>   </span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span></span>,<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;root&#x27;</span>)<br>);<br><br><br></code></pre></td></tr></table></div></figure>

<h3 id="15-2-hooks-js"><a href="#15-2-hooks-js" class="headerlink" title="15.2 hooks.js"></a>15.2 hooks.js</h3><p>src\react-router\hooks.js</p>
<figure class="highlight reasonml"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-5gyph7lacl5vpl"></i><span>reasonml</span><div class="collapse show" id="collapse-5gyph7lacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs reasonml">import React from &#x27;react&#x27;;<br>import RouterContext from &#x27;./RouterContext&#x27;;<br>import matchPath from &#x27;./matchPath&#x27;;<br>export <span class="hljs-keyword">function</span> use<span class="hljs-constructor">Params()</span>&#123;<br>    <span class="hljs-keyword">let</span> <span class="hljs-keyword">match</span> = <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">React</span>.</span></span>use<span class="hljs-constructor">Context(RouterContext)</span>.<span class="hljs-keyword">match</span>;<br>    return <span class="hljs-keyword">match</span>?<span class="hljs-keyword">match</span>.params:&#123;&#125;;<br>&#125;<br>export <span class="hljs-keyword">function</span> use<span class="hljs-constructor">Location()</span>&#123;<br>    return <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">React</span>.</span></span>use<span class="hljs-constructor">Context(RouterContext)</span>.location;<br>&#125;<br>export <span class="hljs-keyword">function</span> use<span class="hljs-constructor">History()</span>&#123;<br>    return <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">React</span>.</span></span>use<span class="hljs-constructor">Context(RouterContext)</span>.history;<br>&#125;<br>export <span class="hljs-keyword">function</span> use<span class="hljs-constructor">RouteMatch(<span class="hljs-params">path</span>)</span>&#123;<br>   const location = use<span class="hljs-constructor">Location()</span>;<span class="hljs-comment">//获取当前的路径pathname代表当前的路径名</span><br>   <span class="hljs-keyword">let</span> <span class="hljs-keyword">match</span> = <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">React</span>.</span></span>use<span class="hljs-constructor">Context(RouterContext)</span>.<span class="hljs-keyword">match</span>;<span class="hljs-comment">//获得匹配结果</span><br>   return path?<span class="hljs-keyword">match</span><span class="hljs-constructor">Path(<span class="hljs-params">location</span>.<span class="hljs-params">pathname</span>,<span class="hljs-params">path</span>)</span>:<span class="hljs-keyword">match</span>;<br>&#125;<br><br></code></pre></td></tr></table></div></figure>

<h3 id="15-3-react-router-index-js"><a href="#15-3-react-router-index-js" class="headerlink" title="15.3 react-router\index.js"></a>15.3 react-router\index.js</h3><p>src\react-router\index.js</p>
<figure class="highlight coffeescript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-50hiamlacl5vpl"></i><span>coffeescript</span><div class="collapse show" id="collapse-50hiamlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Route&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Route&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Router&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Router&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> __RouterContext&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RouterContext&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> matchPath&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./matchPath&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Switch&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Switch&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Redirect&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Redirect&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> withRouter&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./withRouter&#x27;</span>;<br><span class="hljs-keyword">export</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> Prompt&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Prompt&#x27;</span>;<br>+<span class="hljs-keyword">export</span> &#123;useHistory,useLocation,useParams,useRouteMatch&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./hooks&#x27;</span>;<br><br></code></pre></td></tr></table></div></figure>

<h2 id="16-路由懒加载"><a href="#16-路由懒加载" class="headerlink" title="16.路由懒加载 "></a>16.路由懒加载 </h2><h3 id="16-1-src-index-js"><a href="#16-1-src-index-js" class="headerlink" title="16.1 src\index.js"></a>16.1 src\index.js</h3><p>src\index.js</p>
<figure class="highlight javascript"><i class="iconfont icon-top" type="button" data-toggle="collapse" data-target="#collapse-p9thunlacl5vpl"></i><span>javascript</span><div class="collapse show" id="collapse-p9thunlacl5vpl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, &#123; <span class="hljs-title class_">Suspense</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-dom&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;<br>  <span class="hljs-title class_">BrowserRouter</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">Router</span>, <span class="hljs-title class_">Route</span>,<span class="hljs-title class_">Link</span><br>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-router-dom&#x27;</span>;<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">lazy</span>(<span class="hljs-params">load</span>) &#123;<br>  <span class="hljs-keyword">return</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">extends</span> <span class="hljs-title class_">React</span>.<span class="hljs-property">Component</span> &#123;<br>    state = &#123; <span class="hljs-title class_">InnerComponent</span>: <span class="hljs-literal">null</span> &#125;<br>    <span class="hljs-title function_">componentDidMount</span>(<span class="hljs-params"></span>) &#123;<br>      <span class="hljs-title function_">load</span>().<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">result</span> =&gt;</span> &#123;<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>(&#123; <span class="hljs-title class_">InnerComponent</span>: result.<span class="hljs-property">default</span> || result &#125;);<br>      &#125;);<br>    &#125;<br>    <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>) &#123;<br>      <span class="hljs-keyword">let</span> &#123; <span class="hljs-title class_">InnerComponent</span> &#125; = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>;<br>      <span class="hljs-keyword">return</span> <span class="hljs-title class_">InnerComponent</span> ? <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">InnerComponent</span> /&gt;</span></span> : <span class="hljs-literal">null</span>;<br>    &#125;<br>  &#125;<br>&#125;<br><span class="hljs-keyword">const</span> <span class="hljs-title class_">LazyHome</span> = <span class="hljs-title class_">React</span>.<span class="hljs-title function_">lazy</span>(<span class="hljs-function">() =&gt;</span> <span class="hljs-title function_">import</span>(<span class="hljs-comment">/* webpackChunkName: &quot;Home&quot; */</span><span class="hljs-string">&#x27;./components/Home&#x27;</span>));<br><span class="hljs-keyword">const</span> <span class="hljs-title class_">LazyLogin</span> = <span class="hljs-title class_">React</span>.<span class="hljs-title function_">lazy</span>(<span class="hljs-function">() =&gt;</span> <span class="hljs-title function_">import</span>(<span class="hljs-comment">/* webpackChunkName: &quot;Login&quot; */</span><span class="hljs-string">&#x27;./components/Login&#x27;</span>));<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">Loading</span>(<span class="hljs-params"></span>) &#123;<br>  <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>加载中......<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>&#125;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">SuspenseHome</span>(<span class="hljs-params"></span>) &#123;<br>  <span class="hljs-keyword">return</span> (<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Suspense</span> <span class="hljs-attr">fallback</span>=<span class="hljs-string">&#123;</span>&lt;<span class="hljs-attr">Loading</span> /&gt;</span>&#125;&gt;</span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">LazyHome</span> /&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">Suspense</span>&gt;</span></span><br>  )<br>&#125;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">SuspenseLogin</span>(<span class="hljs-params"></span>) &#123;<br>  <span class="hljs-keyword">return</span> (<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Suspense</span> <span class="hljs-attr">fallback</span>=<span class="hljs-string">&#123;</span>&lt;<span class="hljs-attr">Loading</span> /&gt;</span>&#125;&gt;</span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">LazyLogin</span> /&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">Suspense</span>&gt;</span></span><br>  )<br>&#125;<br><span class="hljs-comment">//webpack chunkFilename</span><br><span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">       <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">              <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">              <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/login&quot;</span>&gt;</span>User<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">exact</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;SuspenseHome&#125;</span> /&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/login&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&#123;SuspenseLogin&#125;</span> /&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span></span>,<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;root&#x27;</span>)<br>);<br><br><br></code></pre></td></tr></table></div></figure>

<h2 id="链接"><a href="#链接" class="headerlink" title="链接 "></a>链接 </h2><ul>
<li>  <a target="_blank" rel="noopener" href="https://gitee.com/zhufengpeixun/zhufeng_react_router_20201106_prepare">zhufeng_react_router</a></li>
</ul>

                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/categories/react/" class="category-chain-item">react</a>
  
  
    <span>></span>
    
  <a href="/categories/react/react-router/" class="category-chain-item">react-router</a>
  
  

  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/tags/react/">#react</a>
      
        <a href="/tags/react-router/">#react-router</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>实现一个简版mini-router</div>
      <div>http://81.68.132.127/2022/10/31/react/router/实现简版router/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>Ikki</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2022年10月31日</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>更新于</div>
          <div>2022年10月31日</div>
        </div>
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2022/11/11/formily/formily%E5%9F%BA%E7%A1%80/" title="formily基础">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">formily基础</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2022/10/30/dev_ops/docker/02.docker-compose.yml%E6%96%87%E4%BB%B6%E5%B8%B8%E7%94%A8%E5%8F%82%E6%95%B0/" title="02.docker-compose.yml文件常用参数">
                        <span class="hidden-mobile">02.docker-compose.yml文件常用参数</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
  <article id="comments" lazyload>
    
  <div id="valine"></div>
  <script type="text/javascript">
    Fluid.utils.loadComments('#valine', function() {
      Fluid.utils.createScript('https://lib.baomitu.com/valine/1.5.1/Valine.min.js', function() {
        var options = Object.assign(
          {"appId":"6KzYWc2oaEBaHgNl4UIicMJC-gzGzoHsz","appKey":"vJ4FIwKeHRmHraCJraAsjyZ7","path":"window.location.pathname","placeholder":"请输入你的评论\n昵称为必填项目(输入QQ号码可以自动获取昵称和邮箱)\n虽然email不是必选，但是填写了email可以收到推送通知哦！","avatar":"retro","meta":["nick","mail","link"],"requiredFields":[],"pageSize":10,"lang":"zh-CN","highlight":true,"recordIP":true,"serverURLs":"","emojiCDN":null,"emojiMaps":null,"enableQQ":true},
          {
            el: "#valine",
            path: window.location.pathname
          }
        )
        new Valine(options);
        Fluid.utils.waitElementVisible('#valine .vcontent', () => {
          var imgSelector = '#valine .vcontent img:not(.vemoji)';
          Fluid.plugins.imageCaption(imgSelector);
          Fluid.plugins.fancyBox(imgSelector);
        })
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the comments</noscript>


  </article>


          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
      IKKI-专业BUG开发
    </div>
  
  
    <div class="statistics">
  
  

  
    
      <span id="busuanzi_container_site_pv" style="display: none">
        总访问量 
        <span id="busuanzi_value_site_pv"></span>
         次
      </span>
    
    
      <span id="busuanzi_container_site_uv" style="display: none">
        总访客数 
        <span id="busuanzi_value_site_uv"></span>
         人
      </span>
    
    
  
</div>

  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/js/local-search.js" ></script>

  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  
<script src="/fluid/js/star.js"></script>



<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
